Javascript - Executing all the validation functions on form submit

Question

I am currently working on an Email form and have little experience with javascript but am close to accomplishing what I need but struggling at one point, spent hours trying everything I can find searching and figured someone on here would probably have my answer instantly.

I currently have 3 functions checking a box is filled, email is correct format and passwords match. If I set each function to run on its own upon clicking submit they work perfectly for their own intended purpose, however I am having trouble working out how to make it so that all 3 functions are run upon hitting submit. My final attempt which seems closest is adding the validateForm function at the bottom of my scripts to run all scripts but this did not seem to work. Hopefully something small I am overlooking, appreciate any help.

HTML:

<form name="registerkeys" form action="form.php" method="post" onsubmit="return validateForm();">
First Name:  <input type="text" name="first_name"><br>
Last Name:  <input type="text" name="last_name"><br>
Email:  <input type="text" name="email"><br>
Phone Number:  <input type="text" name="phonenumber"><br>
Information on Key:  <input type="text" name="keyinfo"><br>
Password:  <input type="password" name="password" id="password"></label><br>
Verify Password:  <input type="password" name="passwordverify" id="passwordverify"><br>
Password Hint:  <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Comments:"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

Javascript:

function validateFill(){
    var x=document.forms["registerkeys"]["first_name"].value;
    if (x==null || x=="") {
        alert("First name must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["last_name"].value;
    if (x==null || x=="") {
        alert("Last name must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["phonenumber"].value;
    if (x==null || x=="") {
        alert("Phone number must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["keyinfo"].value;
    if (x==null || x=="") {
        alert("Key info must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["pass1"].value;
    if (x==null || x=="") {
        alert("Password must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["passwordhint"].value;
    if (x==null || x=="") {
        alert("Password hint must be filled out");
        return false;
  }

} 


function validateEmail()
{
var x=document.forms["registerkeys"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}


function validatePassword(){
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var ok = true;
    if (password != passwordverify) {
        alert("Passwords Do not match");
        document.getElementById("password").style.borderColor = "#E34234";
        document.getElementById("passwordverify").style.borderColor = "#E34234";
        ok = false;
    }
    else {
        alert("Passwords Match!!!");
    }
    return ok;
}


function validateForm(){
    var a = validateFill();
    var b = validateEmail();
    var c = validatePassword();
    return a && b && c;
}

dkasipovic · Accepted Answer · 2014-04-08 08:20:31Z

2

Your validateFill() and validateEmail() function should return true at the end.

validateFill() only returns false if validation has not passed, but never true. You should add return true at the end of the function, outside of conditions.

validateEmail() returns false if email is invalid but you are missing the return true if email is valid.

Also, to prevent duplicate popups I suggest that you change your validateForm() to something like this:

function validateForm() {
 var a = validateFill();

 if (a) var b = validateEmail();
 else var b = false;

 if (a&&b) var c = validatePassword();
 else var c = false;

 return a && b && c;
}

So it only checks one function until it passes, and then checks the next.

edited Apr 8, 2014 at 8:20

answered Apr 8, 2014 at 7:59

dkasipovic

6,1301 gold badge23 silver badges27 bronze badges

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

5 Comments

Cjeffryes13 Over a year ago

Thanks, I have added return true; to the end of each function just before the curly bracket and this has not resolved the issue. Have I added this incorrectly. Apologies in advance I lack knowledge of javascript and what you see here are snippets collected from the web. Here is where im uploading for test purposes and as you can see none of the function are working. cjeffryes.comoj.com

dkasipovic Over a year ago

And what exactly is not working? It seems to be working for me, altough with multiple messages, but it seems to work?

Cjeffryes13 Over a year ago

Oh I see, it does work to some degree, but im finding if I fill everybox with one letter, and add passwords that dont match the form still submits. But if i leave a field empty I get errors including passwords dont match. Guessing my functions themselves need a bit of attention as they are all being run.

Cjeffryes13 Over a year ago

Seems to be working now, I added to the functions requiring the password fields to both be filled as well as email and it seems to work. I see what you mean about multiple messages, I will look into this and also remove passwords match message. Thanks a lot for your help @D.Kasipovic, much appreciated. Edit: in response to your edit i will give that a try, thank again :)

terales Over a year ago

Why don't just call functions directly: function validateForm() { return validateFill() && validateEmail() && validatePassword(); }? If validateFill() return false then other functions won't be celled and so on.

terales · Accepted Answer · 2014-04-08 07:56:14Z

-1

validateFill() and validateEmail() should return true at the end (right now they return nothing if validation passed.

validatePassword() should return true instead of ok.

answered Apr 8, 2014 at 7:56

terales

3,21826 silver badges34 bronze badges

4 Comments

dkasipovic Over a year ago

ok is a variable that is set either to true or false. Read the example.

terales Over a year ago

He use two different approaches: flag in validatePassword() and return on error in other functions. One approach thought all code will be safer and i think in JS second is more standart

dkasipovic Over a year ago

Personally I think that directly returning false is better because it stops function execution on the first error occured. However, it can have consequences since function never gets to the end, and that can play games with your logic.

terales Over a year ago

Yep, totaly agree with you. Edited comment to be clear

Collectives™ on Stack Overflow

Javascript - Executing all the validation functions on form submit

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related