Django同一个表单如何同时支持GET校验标题与POST提交内容功能

1. 前端模板（createNewPage.html）修改 #

核心思路是将校验用的GET表单和保存用的POST表单完全分离，通过隐藏字段同步标题值，同时修复原代码的按钮标签错误：

<div class="form-group" style="margin-right: 20%">        
     <form id="newTitle" action="{% url 'save' %}" method="GET">
        {% csrf_token %}        
            {% block newTitle %}
                <label>{{ newTitle_form.title.label }}</label>
                {{ newTitle_form.title }}          
            {% endblock %}
     </form>
        {% if messages %}
            <div id="messageDiv" class="alert alert-info" role="alert">
                {% for message in messages %}                
                    {{ message }}                
                {% endfor %}         
            </div>        
        {% endif %}
        {% if messages %}
            <div class="h1 flex-container btn-save-placement" style="height: 0px; padding-top: 0px; margin-right: 0%">
                <div>
                    <a role="button" id="changeTopic" class="btn btn-outline-dark" href="{% url 'new_topic' %}">Change</a>
                    <a role="button" class="btn btn-outline-dark" href="{% url 'edit' pagetitle %}">Edit</a>
                </div>
            </div>  
        {% endif %}
    </div>

<!-- 新增独立POST表单处理保存逻辑 -->
<form id="savePageForm" action="{% url 'save' %}" method="POST">
    {% csrf_token %}
    <!-- 隐藏字段同步标题值，保证POST提交时能拿到标题参数 -->
    <input type="hidden" name="title" id="hiddenTitle" value="{{ entry }}">
    <div class="form-group" style="margin-right: 20%; margin-top: 25px">
        {% block textArea %}
            <label>{{ newText_form.text.label }}</label>
            {{ newText_form.text }}
        {% endblock %}
    </div> 
    <div class="btn-save-placement flex-container" style="height: 48px; padding-top: 0px;">
       <!-- 修复原按钮标签错误，删除无效href，关联到POST表单 -->
       <button class="btn btn-outline-dark" type="submit" form="savePageForm">Save New Page</button>
    </div>
</form>

<script>
    function blurFunction() {
        var newTitleText = document.getElementById("titleCheck");
        if (newTitleText.value !== null && newTitleText.value !== "") {
            // 提交校验前先同步标题到隐藏字段
            document.getElementById("hiddenTitle").value = newTitleText.value;
            document.getElementById("newTitle").requestSubmit();
        }                    
    }

    // 页面加载后判断：校验通过无报错时自动聚焦到内容输入框
    window.onload = function() {
        const msgDiv = document.getElementById("messageDiv");
        const titleVal = document.getElementById("titleCheck").value;
        if (!msgDiv && titleVal) {
            document.getElementById("NewTopicText").focus();
        }
    }
</script>

2. 视图（views.py）调整 #

现有save函数逻辑无需修改，只需确保new_topic_t视图能将校验后返回的标题参数回填到表单，避免校验跳转后标题丢失：

def new_topic_t(request, entry):
    # 回填标题到表单初始值
    title_form = newTitle(initial={'title': entry})
    text_form = newTitle()
    return render(request, "createNewPage.html", {
        "newTitle_form": title_form,
        "newText_form": text_form,
        "entry": entry,
        "pagetitle": entry
    })

3. 表单类（forms.py）可选优化 #

如果需要结构更清晰，可以将标题、输入拆分为两个独立表单类，不拆分也可正常运行：

# 标题校验专用表单
class NewTitleForm(forms.Form):
    title = forms.CharField(label='New Page Title', max_length=100, widget=forms.TextInput(
        attrs={
            'id': 'titleCheck',
            'class': 'search', 
            'type': 'text',
            'placeholder': 'Type Topic Title Here...',
            'onblur': 'blurFunction()',
        }))

# 内容输入专用表单
class NewContentForm(forms.Form):
    text = forms.CharField(label='Enter Page Text', widget=forms.Textarea(
        attrs={
            'id': 'NewTopicText',
            'class': 'form-control',
            'rows': '14'
        }))

内容的提问来源于stack exchange，提问作者Asmat Ullah Khan