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

Question

这个问题被问了很多遍。我审查了其中大多数问题，所有情况下都存在问题。

1. 他们不是return在函数调用onSubmit表单之前编写的。

2. 他们使用onClick代替onSubmit。

3. 他们在内部if语句中返回假，所以如果a 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();"