即使javascript表单验证失败，表单也会提交

Question

我制作了一个javascript代码来验证注册表单，但即使我尝试提交所有字段留空的表单，它仍然会提交表单。

这是我的JavaScript：

<script type = "text/javascript">
        function hideError(){
            document.getElementById("firstnameerror").style.display="none";
            document.getElementById("lastnameerror").style.display="none";
            document.getElementById("addresserror").style.display="none";
            document.getElementById("emailerror").style.display="none";
            document.getElementById("sexerror").style.display="none";
            document.getElementById("ageerror").style.display="none";
            document.getElementById("pwderror").style.display="none";
            document.getElementById("disclosureerror").style.display="none";
        }
        function checkForm(){
            var firstname=document.getElementById("firstname").value;
            var lastname=document.getElementById("lastname").value;
            var address=document.getElementById("address").value;
            var email=document.getElementById("email").value;
            var sex=document.getElementById("sex").value;
            var age=document.getElementById("age").value;
            var pwd=document.getElementById("pwd").value;
            var disclosure=document.getElementById("disclosure").value;
            if(firstname==null || firstname==""){
                hideError();
                document.getElementById("firstnameerror").style.display="inline";
                document.getElementById("firstnamereq").style.display="none";
                document.getElementById("firstname").select();
                document.getElementById("firstname").focus();
                alert('form error'); return false;
            }
            else if(lastname==null || lastname==""){
                hideError();
                document.getElementById("lastnameerror").style.display="inline";
                document.getElementById("lastnamereq").style.display="none";
                document.getElementById("lastname").select();
                document.getElementById("lastname").focus();
                alert('form error'); return false;
            }
            else if(address==null || address==""){
                hideError();
                document.getElementById("addresserror").style.display="inline";
                document.getElementById("addressreq").style.display="none";
                document.getElementById("address").select();
                document.getElementById("address").focus();
                alert('form error'); return false;
            }
            else if(email==null || email==""){
                hideError();
                document.getElementById("emailError1").style.display="inline";
                document.getElementById("emailreq").style.display="none";
                document.getElementById("email").select();
                document.getElementById("email").focus();
            }
            var atpos=email.indexOf("@");
            var dotpos=email.lastIndexOf(".");
            else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
                hideError();
                document.getElementById("emailError2").style.display="inline";
                document.getElementById("emailreq").style.display="none";
                document.getElementById("email").select();
                document.getElementById("email").focus();
                alert('form error'); return false;
            }
            else if(sex==null || sex==""){
                hideError();
                document.getElementById("sexerror").style.display="inline";
                document.getElementById("sexreq").style.display="none";
                document.getElementById("sex").select();
                document.getElementById("sex").focus();
                alert('form error'); return false;
            }
            else if(age==null || age==""){
                hideError();
                document.getElementById("ageerror").style.display="inline";
                document.getElementById("agereq").style.display="none";
                document.getElementById("age").select();
                document.getElementById("age").focus();
                alert('form error'); return false;
            }
            else if(pwd==null || pwd==""){
                hideError();
                document.getElementById("pwderror").style.display="inline";
                document.getElementById("pwdreq").style.display="none";
                document.getElementById("pwd").select();
                document.getElementById("pwd").focus();
                alert('form error'); return false;
            }
            else if(pwd.length<4){
                hideError();
                document.getElementById("pwderror").style.display="inline";
                document.getElementById("pwdreq").style.display="none";
                document.getElementById("pwd").select();
                document.getElementById("pwd").focus();
                alert('form error'); return false;
            }
            else if (!(/[0-9]/).test(pwd)){
                hideError();
                document.getElementById("pwderror").style.display="inline";
                document.getElementById("pwdreq").style.display="none";
                document.getElementById("pwd").select();
                document.getElementById("pwd").focus();
                alert('form error'); return false;
            }
            else if (!(/[a-zA-Z]/).test(pwd)){
                hideError();
                document.getElementById("pwderror").style.display="inline";
                document.getElementById("pwdreq").style.display="none";
                document.getElementById("pwd").select();
                document.getElementById("pwd").focus();
                alert('form error'); return false;
            }
            else if(disclosure==null || disclosure==""){
                hideError();
                document.getElementById("disclosureerror").style.display="inline";
                document.getElementById("disclosurereq").style.display="none";
                document.getElementById("disclosure").select();
                document.getElementById("disclosure").focus();
                alert('form error'); return false;
            }
            return true;
        }
    </script>

以下是表格：

<form onsubmit="return checkForm();" method="post" action="formtest.php">
                        First Name:<br/>
                        <input type="text" value="" id="firstname" name="firstname" size="25"/><br/>
                        <div id="firstnamereq"><em>Must be filled in</em><br/></div>
                        <div class=error id="firstnameerror">Required: Please enter your first name<br/></div><br/>

                        Last Name:<br/>
                        <input type="text" value="" id="lastname" name="lastname" size="25"/><br/>
                        <div id="lastnamereq"><em>Must be filled in</em><br/></div>
                        <div class=error id="lastnameerror">Required: Please enter your last name<br/></div><br/>

                        Address:<br/>
                        <input type="text" value="" id="address" name="address" size="50"/><br/>
                        <div id="addressreq"><em>Must be filled in</em><br/></div>
                        <div class=error id="addresserror">Required: Please enter your address<br/></div><br/>

                        Email:<br/>
                        <input type="text" value="" id="email" name="email" size="50"/><br/>
                        <div id="emailreq"><em>Must be a valid email address</em><br/></div>
                        <div class=error id="emailerror1">Required: Please enter your email address<br/></div>
                        <div class=error id="emailerror2">Not a valid email address!<br/></div><br/>

                        Sex:<br/>
                        <input type="radio" value="male" id="sex" name="sex"/>Male<br/>
                        <input type="radio" value="female" id="sex" name="sex"/>Female<br/>
                        <div id="sexreq"><em>Must select either one</em><br/></div>
                        <div class=error id="sexerror">Required: Please enter your sex<br/></div><br/>

                        Age:<br/>
                        <select name="age" id="age">
                        <option value=""/></option>
                        <option value="underage"/>16 - 17</option>
                        <option value="youth"/>18 - 25</option>
                        <option value="adult"/>26 - 40</option>
                        <option value="mature"/>41 - 65</option>
                        <option value="senior"/>66+</option>
                        </select><br/>
                        <div id="agereq"><em>Must select an age group</em><br/></div>
                        <div class=error id="ageerror">Required: Please enter your age group<br/></div><br/>

                        Password:<br/>
                        <input type="password" value="" id="pwd" name="pwd"/><br/>
                        <div id="pwdreq"><ul>
                            <li><em>Must be at least 4 characters long</em></li>
                            <li><em>Must have at least 1 character and 1 number</em></li>
                        </ul><br/></div>
                        <div class=error id="pwderror">Please make sure your password meets the following requirements:<br/>
                        <ul>
                            <li>Must be at least 4 characters long</li>
                            <li>Must have at least 1 character and 1 number</li>
                        </ul><br/></div><br/>

                        Disclosure: <input type="checkbox" value="accept" id="disclosure" name="disclosure"/>
                        I have read, understood and consent to the privacy policy.<br/>
                        <div id="disclosurereq"><em>Must be checked</em><br/></div>
                        <div class=error id="disclosureerror">Box must be checked<br/></div>
                        <p><input type="submit" name="submit" value="Register"><br/></p>            
                    </form>  

对不起，如果问题明显存在于代码块的某个地方，但我的未经训练的眼睛完全看不到......我希望有人可以帮助我...... ..

Answer 1

传递给checkForm的第一个参数是事件对象。尝试：

function checkForm(evt) {
    // ... do validation and when it fails:
    evt.preventDefault();
    return false;
    // ...

Answer 2

您不需要else声明，因为您在if声明中有返回。 尝试/抓取也有帮助，因为如果checkForm()内有任何错误，异常抛出而您无法看到错误，浏览器会立即发送表单数据。

function checkForm(){
try {
    var firstname=document.getElementById("firstname").value;
    var lastname=document.getElementById("lastname").value;
    var address=document.getElementById("address").value;
    var email=document.getElementById("email").value;
    var sex=document.getElementById("sex").value;
    var age=document.getElementById("age").value;
    var pwd=document.getElementById("pwd").value;
    var disclosure=document.getElementById("disclosure").value;
    if(!firstname){
        hideError();
        document.getElementById("firstnameerror").style.display="inline";
        document.getElementById("firstnamereq").style.display="none";
        document.getElementById("firstname").select();
        document.getElementById("firstname").focus();
        alert('form error'); return false;
    }
    if(!lastname){
        hideError();
        document.getElementById("lastnameerror").style.display="inline";
        document.getElementById("lastnamereq").style.display="none";
        document.getElementById("lastname").select();
        document.getElementById("lastname").focus();
        alert('form error'); return false;
    }
    if(!address){
        hideError();
        document.getElementById("addresserror").style.display="inline";
        document.getElementById("addressreq").style.display="none";
        document.getElementById("address").select();
        document.getElementById("address").focus();
        alert('form error'); return false;
    }
    if(!email){
        hideError();
        document.getElementById("emailError1").style.display="inline";
        document.getElementById("emailreq").style.display="none";
        document.getElementById("email").select();
        document.getElementById("email").focus();
        alert('form error'); return false;
    }
    var atpos=email.indexOf("@");
    var dotpos=email.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
        hideError();
        document.getElementById("emailError2").style.display="inline";
        document.getElementById("emailreq").style.display="none";
        document.getElementById("email").select();
        document.getElementById("email").focus();
        alert('form error'); return false;
    }
    if(!sex){
        hideError();
        document.getElementById("sexerror").style.display="inline";
        document.getElementById("sexreq").style.display="none";
        document.getElementById("sex").select();
        document.getElementById("sex").focus();
        alert('form error'); return false;
    }
    if(!age){
        hideError();
        document.getElementById("ageerror").style.display="inline";
        document.getElementById("agereq").style.display="none";
        document.getElementById("age").select();
        document.getElementById("age").focus();
        alert('form error'); return false;
    }
    if(!pwd){
        hideError();
        document.getElementById("pwderror").style.display="inline";
        document.getElementById("pwdreq").style.display="none";
        document.getElementById("pwd").select();
        document.getElementById("pwd").focus();
        alert('form error'); return false;
    }
    if(pwd.length<4){
        hideError();
        document.getElementById("pwderror").style.display="inline";
        document.getElementById("pwdreq").style.display="none";
        document.getElementById("pwd").select();
        document.getElementById("pwd").focus();
        alert('form error'); return false;
    }
    if (!(/[0-9]/).test(pwd)){
        hideError();
        document.getElementById("pwderror").style.display="inline";
        document.getElementById("pwdreq").style.display="none";
        document.getElementById("pwd").select();
        document.getElementById("pwd").focus();
        alert('form error'); return false;
    }
    if (!(/[a-zA-Z]/).test(pwd)){
        hideError();
        document.getElementById("pwderror").style.display="inline";
        document.getElementById("pwdreq").style.display="none";
        document.getElementById("pwd").select();
        document.getElementById("pwd").focus();
        alert('form error'); return false;
    }
    if(!disclosure){
        hideError();
        document.getElementById("disclosureerror").style.display="inline";
        document.getElementById("disclosurereq").style.display="none";
        document.getElementById("disclosure").select();
        document.getElementById("disclosure").focus();
        alert('form error'); return false;
    }
    return true;
} catch(error) {
    alert(error)
}
}