Skip to main content
 首页 » 编程设计

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

2024年12月31日11insus

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

  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> 

请您参考如下方法:

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

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