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

Question

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

1. 他们没有在函数调用 onSubmit 表单之前编写 return。

2. 他们使用 onClick 而不是 onSubmit。

3. 它们在 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();"