Question

这个问题被多次询问。我回顾了他们中的大部分内容，所有案例中的问题都是。

他们没有在函数调用return表单之前编写onSubmit。
他们使用onClick代替onSubmit。
他们在if语句中返回false，所以如果if不为真，那么函数返回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>

Answer 1

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

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

Answer 2

我建议将HTML5表单与constraint validation一起使用。所有现代浏览器都支持它，即使过时也有很好的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位数的电话号码。

要推得更多，您可以使用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);

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

只要表单元素无效，就无法提交表单。约束验证的神奇之处！ ;）

Answer 3

我认为你的提交功能是正确的！试着为你的函数需求元素或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语句才到达，因为返回之前其他语句中出错了。当一切正常运行时，返回`语句将执行并返回false，表单将不会提交

Answer 4

请勿在 onsubmit 中使用返回。

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

Answer 5

在JQuery中event.preventDefault()将阻止发生默认事件，event.stopPropagation()将阻止事件冒泡并返回false将同时执行。

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

Answer 6

我曾经遇到过同样的问题，但实际情况确实如此。我以前使用过onsubmit，但改成了驼峰式onSubmit，它可以工作。

Answer 7

因为您没有接受建议您在调用验证函数之前使用 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>

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

7 个答案: