HTML表单弹出违规词警告后仍自动提交的问题排查

核心问题成因 #

当前代码未阻断表单的默认提交流程，具体问题点：

• 提交按钮为type="submit"类型，这类按钮的内置默认行为就是点击后触发表单提交。校验逻辑仅绑定在按钮的点击事件上，就算检测到违规词汇弹出提示，也没有拦截这个默认行为。弹窗确认后，按钮自带的提交流程依然会执行，直接无视校验结果提交数据。
• 校验逻辑存在无效代码：检测到违规词时执行的document.form1.text.select()，对应DOM中不存在name="text"的输入元素，这行代码会触发JS运行时错误，打乱校验流执行。
• 流程逻辑冗余：校验通过分支里手动调用document.form1.submit()，和提交按钮的默认提交行为重复，还会绕开HTML自带的required必填校验规则。

修复方案 #

1. 把校验逻辑的绑定位置从按钮的onClick事件移到表单的onsubmit事件上，这类事件会在表单实际发起提交前触发，支持拦截判断。
2. 调整校验函数的返回值规则：检测到违规词汇时返回false，直接阻断后续提交流程；校验通过时返回true，放行正常提交。
3. 替换违规分支里无效的DOM操作，定位到实际包含违规词的输入框并选中内容，方便用户修改。
4. 移除校验通过分支里冗余的手动提交代码，避免逻辑重复。

修正后核心代码示例 #

调整后的表单结构：

<form name="form1" action="#" method="post" onsubmit="return validate_text();">
    <label>Line 1:&nbsp; </label>
    <input type="text" name="firstline" required onClick="select_area()"><br/>
    <label>Line 2:&nbsp; </label>
    <input type="text" name="secondline" required onClick="select_area2()"><br/>
    <label>Line 3:&nbsp; </label>
    <input type="text" name="thirdline" required onClick="select_area3()"><br/>
    <input type="submit" name="submit_btn" id="submit" value="Submit">
    <input type="reset" id="reset" value="Reset">
</form>

调整后的校验函数核心逻辑：

function validate_text() {
    reset_alert_count();
    // 原有三个输入框的违规词检测逻辑保持不变
    // ...
    
    var alert_text = "";
    for(var k=1; k<=swear_alert_count; k++){
        alert_text += "\n" + "(" + k + ")  " + swear_alert_arr[k-1];
    }
    if(swear_alert_count > 0) {
        alert("The message will not be sent!!!\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
        // 替换原无效的text.select()代码，聚焦第一个包含违规词的输入框
        if(swear_alert_arr.some(word => document.form1.firstline.value.toLowerCase().includes(word))) {
            document.form1.firstline.select();
        } else if(swear_alert_arr.some(word => document.form1.secondline.value.toLowerCase().includes(word))) {
            document.form1.secondline.select();
        } else if(swear_alert_arr.some(word => document.form1.thirdline.value.toLowerCase().includes(word))) {
            document.form1.thirdline.select();
        }
        return false; // 核心：返回false阻断表单提交
    }
    return true; // 校验通过，放行表单正常提交
}

说明：表单的onsubmit事件接收到函数返回的false值时，会直接终止本次提交动作，不会将数据发送到后端；只有返回true时才会执行正常提交流程。

内容的提问来源于stack exchange，提问作者Hypernova