如何实现FormChecks返回false时阻止指定HTML表单提交

你现有代码的逻辑本身已经满足「校验不通过就不发请求」的要求，目前的问题是代码存在两处语法/变量错误，导致校验逻辑可能失效，修复后即可正常运行，具体操作如下：

• 修复FormChecks函数的语法错误：你当前贴出的FormChecks代码末尾多了一个多余的闭合大括号}，删除这个多余的括号即可避免JS语法报错导致校验逻辑中断。
• 补充errorElement变量定义：你在给错误提示元素赋值前没有提前获取该DOM节点，需要先在FormChecks函数内补充对应元素的获取逻辑，示例：

function FormChecks() {
    // 新增这一行，替换为你实际错误提示元素的ID
    const errorElement = document.getElementById('error_tip');
    var errors = []
    var password = document.getElementById("input_password");
    if (/[^a-z0-9]/i.test(password.value)) {
        errors.push("*Password must only be A-Z, a-z or 0-9")
    }
    // 其余校验逻辑不变
    if (errors.length > 0) {
        errorElement.innerHTML = errors.join(', ')
        console.log(errors)
        return false
    }
    return true
}

如果你想进一步优化逻辑避免内联事件的潜在问题，可以替换内联onsubmit为事件监听写法，操作如下：

1. 先删除form标签里的onsubmit="SubmitForm(this,null);return false;"属性
2. 新增JS代码：

document.getElementById('form5').addEventListener('submit', function(e) {
    // 阻止原生表单默认提交行为
    e.preventDefault();
    // 校验不通过直接终止后续逻辑
    if (!FormChecks()) return;
    // 校验通过才执行提交请求
    const fd = new FormData(this);
    CallHTTPHandler(this.action, null, fd);
})

修复完成后，只要FormChecks返回false，发送请求的代码段就不会执行，自然不会发出提交请求，同时原生表单的默认提交行为也已经被阻止，不会出现表单自动跳转提交的问题。

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