即使在验证函数返回 false 后，表单仍在提交答案

【问题标题】：Form is submitting even after validation function returning false即使在验证函数返回 false 后，表单仍在提交
【发布时间】：2017-03-15 07:51:47
【问题描述】：

这个问题被问了很多次。我审查了其中的大部分，所有情况下的问题都是。

在函数调用 onSubmit 表单之前，他们没有写 return。
他们使用的是onClick，而不是onSubmit。
他们在 if 语句中返回 false，所以如果 if 不是 true，那么函数返回 true 并且表单正在提交。

但我的情况与上述所有情况不同。

HTML：

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="return validateForm()">
    /*Various input fields.*/    
</form>

JavaScript：

        <script>
            function validateForm(){

                /*Validating phone numner*/
                var phone = document.forms["booksUpload"]["phone-number"].value;
                var phErr = document.getElementById("phError");

                if(phone.toString().length != 10){
                    phErr.innerHTML = "Enter a valid mobile number (10 digits)";
                }
                else{
                    phErr.innerHTML = "";
                }

                /*Validating Status*/
                var status = document.forms["booksUpload"]["status"];
                var checked = false;
                var statusErr = document.getElementById("statusError");

                for(var i = 0; i < status.length; i++){
                    if(status[i].checked){
                        checked = true;
                        break;  
                    }
                }

                if(checked == false){
                    statusErr.innerHTML = "Select one option \"Old or New\"";
                }

                else{
                    statusErr.innerHTML = "";
                }

                return false;
            }
        </script>

【问题讨论】：

请澄清，仍然不清楚您要达到什么目的？
我不想提交我的表单，所以我从 validatonForm() 方法返回 false。表单仍在提交中。
在下面查看我的答案

标签： javascript forms function validation

【解决方案1】：

你应该在调用你的函数之前阻止表单提交

onsubmit="event.preventDefault(); validateForm();"

【讨论】：

表单提交是在函数调用之后完成的。通过执行我在函数中使用的innerHtml 来保证。
这个解决方案对我有用。我曾尝试在函数调用前使用驼峰式onSubmit 和return 关键字，但在函数调用前添加event.preventDefault(); 最后阻止了Firefox v82 在函数返回false 时提交表单。感谢您的建议！

【解决方案2】：

我认为您的提交功能是正确的！只需尝试为您的功能需求元素或 id 编写完整的 html !!!

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="return validateForm()">
    <input type="text" name="phone-number">
    <select name="status"></select>
    <input type="submit"> 
</form>
<p id="phError"></p>
<p id="statusError"></p>

函数执行直到 return 语句才到达，因为 return 之前的其他语句中有问题。当函数中一切正常时，return`语句将执行并返回false并且表单不会提交

【讨论】：

对不起，我没看懂你的回答，请说的更清楚。
你在函数中有document.forms["booksUpload"]["phone-number"].value;，所以如果form没有像phone-number这样的名字，它会抛出错误，你的整个函数将无法工作并且什么也不返回！！
提交表单时。当我输入 6-7 位数字然后页面转到 action_page.php 时，phErr 元素的 innerHtml 正在发生变化。所以我认为phone-number 元素没有错。我认为状态验证是错误的。顺便说一句，我认为我的问题找到了。感谢帮助。 :)

【解决方案3】：

在 JQuery 中，event.preventDefault() 将阻止默认事件发生，event.stopPropagation() 将阻止事件冒泡，而 return false 将两者兼而有之。

在非 JQuery 中 return false 不会阻止事件冒泡

【讨论】：

【解决方案4】：

我建议使用带有constraint validation 的HTML5 表单。所有现代浏览器都支持它，即使是过时的也有很好的 polyfill。

这是一个小例子。

<form id="constraint-form" method="post" action="">
    <label for="phone-number">phone number</label>
    <input type="tel" name="phone-number" id="phone-number" value="" pattern="[0-9]{10}" required>

    <input type="submit" name="submit-button" value="submit">
</form>

自己试试吧。这个小例子在没有 Javascript 的情况下执行，并验证电话号码的 10 位数，因为它的 required 属性。

要推送更多，您可以使用 Javascript 来显示错误消息。

<input type="tel" name="phone-number" id="phone-number" value="" pattern="[0-9]{10}" data-valuemissing="Your phone number is required" data-patternmismatch="Please enter digits only. Your phone number needs 10 digits." required>

var form = document.querySelector('#constraint-form');
form.addEventListener('invalid', function(event) {
    event.preventDefault();

    var element = event.target,
        message = element.validationMessage;

    if (element.validity.valueMissing === true && element.dataset.valuemissing !== undefined) {
        message = element.dataset.valuemissing;
    }

    if (element.validity.patternMismatch === true && element.dataset.patternmismatch !== undefined) {
        message = element.dataset.patternmismatch;
    }
}, true);

element.setCustomValidity(message);
alert(message);

这是一个未经测试的小例子。表单标签获取一个无效的事件监听器，并在提交时如果该表单中有无效的表单元素触发。在此示例中，电话号码输入元素是必需的，并获得了自己的数据属性，作为如何将单个错误消息绑定到元素的示例。当元素为空或与模式不匹配时，将警告其中一条错误消息。

只要存在无效的表单元素，就无法提交表单。约束验证的魔力！ ;)

【讨论】：

这很好，很有帮助，但我还是不明白我的代码有什么问题？
忘记表单代码中的onsubmit 属性。只需在表单中添加一个事件监听器，例如 form.addEventListener('submit', function(event) { event.preventDefault(); ... // if form is valid => form.submit(); });

【解决方案5】：

不要在 onsubmit 中使用 return。

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="validateForm()">
    /*Various input fields.*/    
</form>

【讨论】：

还是不行。而且我认为使用onSubmit="return validationForm()" 是正确的方法而不是onSubmit="validateForm()" 我读了there 和there。

【解决方案6】：

因为您没有接受建议您在调用验证函数之前使用 event.preventDefault() 的答案，所以我想建议您在验证函数中使用 preventDefault 调用

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="return validateForm(event)">
    /*Various input fields.*/    
</form>

并在您的 javascript 中使用

<script>
    function validateForm(e){
        ...............
        //call this where ever you want to prevent submission
        e.preventDefault();
        .........
    }

</script>

【讨论】：

【解决方案7】：

我遇到了同样的问题，但对于我的情况。我之前用的是onsubmit，后来改成驼峰式onSubmit就可以了。

【讨论】：