javascript - 即使 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;
    // ...