Javascript form validation - can't validate multiple fields

Question

I am trying to get a form with multiple fields validate when the submit button is pressed.

If a field is invalid then a message appears next to the field. I can get one of the invalid messages to appear but not all of them. The function I am using is below.

function checkForm() {           
    document.getElementById("test").onsubmit=function(){
        var title = document.getElementById("titles");
        if (title.selectedIndex == -1) {
            return null;
        }

        var email = document.getElementById('email');
        //Regular Expression for checking email
        var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
        if (!emailRegEx.test(email.value)) {
            document.getElementById("errEmail").style.display="inline";
            return false;
        }

        if(document.getElementById("fname").value==""){
            document.getElementById("errfName").style.display="inline";
            return false;
        } 
        else {
            return true;
        }

        if(document.getElementById("lname").value==""){
            document.getElementById("errlName").style.display="inline";
            return false;
        } 
        else {
            return true;
        }       
    }   
}

html below

<form name ="reg" id="test">
   <fieldset id="controls">

     <div>
     <label for="title">Title: </label>
     <select id="titles">
         <option value="mr" selected="selected">Title</option>
         <option value="mr">Mr.</option>
         <option value="mrs">Mrs.</option>
         <option value="ms">Ms.</option>
         <option value="miss">Miss</option>
     </select>
    </div>

    <div>
      <label for="fname">First Name: </label>
      <input id="fname" type="text"><span id="errfName" class="error">* Please Enter a First Name</span>
     </div>


    <div>
      <label for="lname">Last Name: </label>
      <input id="lname" type="text"><span id="errlName" class="error">* Please Enter a Last Name</span>
     </div>


     <div>
        <label for="email">Email: </label>
        <input id="email" type="text" size="40"><span id="errEmail" class="error">* Please enter a valid email</span>
        </div>
     <div>
         <input type="submit" value="submit">
      </div>
   </fieldset>
</form>
</body>
</html>

Your "return false;" is exiting the function. So, once your first error appears, it then returns false; Bamn.. stops execution of the other tests. Same with your "return true;". Once either of those conditions rise, you are exiting the rest of the tests. — james emanon
– james emanon, Commented Jan 11, 2014 at 19:47
build up a javascript object with the errors for each input. then return that at the end. — Jed Schneider
– Jed Schneider, Commented Jan 11, 2014 at 19:56
@user3185835 I updated with an answer. see if that suites you. — james emanon
– james emanon, Commented Jan 11, 2014 at 19:56

james emanon · Accepted Answer · 2014-01-11 19:54:16Z

1

try this:

function checkForm() { 
   var errors = [];      
   document.getElementById("test").onsubmit=function(){
    var title = document.getElementById("titles");
    if (title.selectedIndex == -1) {
        return null;
    }

    var email = document.getElementById('email');
    //Regular Expression for checking email
    var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
    if (!emailRegEx.test(email.value)) {
        errors.push("errEmail");
    }

    if(document.getElementById("fname").value==""){
        errors.push("errfName");
    } 

    if(document.getElementById("lname").value==""){
        errors.push("errlName");
    } 
    if(errors.length > 0 ){
        for(var i=0;i<errors.length;i++){
          document.getElementById(errors[i]).style.display="inline";
         }
         return false;
     }else{
       return true
     } 
   }   
 }

answered Jan 11, 2014 at 19:54

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

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

4 Comments

dimma415 Over a year ago

If I have another function that enters default text into the fields will this still work? For example function textHint() { var defaultText = "Please enter your first name"; var txtElem = document.getElementById("fname"); txtElem.value = defaultText; txtElem.style.color = "#A8A8A8"; txtElem.style.fontStyle = "italic";

dimma415 Over a year ago

When I enter default text in the field it seems to take this as a valid entry. Could if(document.getElementById("fname").value=="") be treating the default text as a valid entry?

james emanon Over a year ago

well, if you have a "default" in the "first name" field, then its valid because according to your test it does not equal "", because that is what your tests does if(fname) == "". Since it's not empty because you have default content. So, you have two options. 1.) update your conditional to do something like if(fname == "" || fname == "whatever your default text is") or 2.) or when user "clicks/focuses" in input the field, the default text goes away. I mean, there are alot of options actually. have hidden spans/divs with default text. Show when errors happen etc.. just depends on what you want

dimma415 Over a year ago

Embarrassing - option number 1 is so obvious - I think I have been staring at this for too long. James you are a star!

Collectives™ on Stack Overflow

Javascript form validation - can't validate multiple fields

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related