Form submits even if javascript form validation fails

Question

I made a javascript code to validate a registration form, but even if I try submitting the form with all fields left blank it still submits the form.

Here's my 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>

And here's the form:

<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>

I'm sorry if the problem's obvious somewhere in that block of code, but it's just completely invisible to my untrained eye... I hope someone here can help me.....

where are the return false statements? Half of your else ifs are missing them. — epascarello
– epascarello, Commented Apr 17, 2013 at 15:33
Do you get the alert "form error"? At email==null || email=="" you are missing the return false; — Niels
– Niels, Commented Apr 17, 2013 at 15:33

Steve H. · Accepted Answer · 2013-04-17 15:32:54Z

2

The first parameter passed to checkForm is the event object. Try:

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

answered Apr 17, 2013 at 15:32

Steve H.

6,9672 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ikrom · Accepted Answer · 2013-04-17 17:29:18Z

You don't need else statement, because you have return within if statement. Try/catch also helps, because if you have any error within checkForm(), exception throws and you cannot see the error, browser instantly sends form data.

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)
}
}

Collectives™ on Stack Overflow

Form submits even if javascript form validation fails

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related