CODEWITHSUNDEEP
javascriptformsvalidation
Nicholas Hassan
Nicholas Hassan

Reputation: 969

Javascript - how to prevent form from sending with multiple validation checks?

It seems that you can prevent a form from sending if your validation check returns false.

I have:

<form name="registration" action="registration.php" onsubmit="return validate()">
    <!-- some inputs like: -->
<input type="text" id="username" name="username">
<input type="text" id="firstname" name="firstname">
<input type="text" id="lastname" name="lastname">
    <!-- and some others... -->
</form>

My validate() function in my javascript is made of multiple different checks though.

function validate() {
    checkUsername();
    checkPassword(); 
    checkFirstname(); 
    checkLastname();
    checkBirthdate();
    checkEmail();
    checkPhone();
}

There might be a case where the user inputs valid data for all of them except one. If that's the case, how do I tell validate() to still send 'false' back to the form, so that it doesn't submit?

Edit: If anyone is still reading this, for some reason my form is still sending. I even changed my validate() function so the only statement is "return false;" Do I have a syntax error or something?

Edit2: I found another solution that is simple, even if a little archaic. It overcame an issue I had where the function was only evaluating the first check and returning.

function validate() {
    var truth1 = checkUsername();
    var truth2 = checkPassword(); 
    var truth3 = checkFirstname(); 
    var truth4 = checkLastname();
    var truth5 = checkBirthdate();
    var truth6 = checkEmail();
    var truth7 = checkPhone();
    return (truth1 && truth3 && truth5 && truth2 && truth4 && truth6 && truth7);
}

Upvotes: 1

Views: 89

Answers (3)

Sagi_Avinash_Varma
Sagi_Avinash_Varma

Reputation: 1509

all your individual field validation functions should return a boolean.

then your overall form validation function will be

function validate() {
    var checks = [
        checkUsername,
        checkPassword,
        checkFirstname,
        checkLastname,
        checkBirthdate,
        checkEmail,
        checkPhone,
    ].map(function(check) { return check(); });

    return (checks.indexOf(false) === -1);
}

now ur validate function will return false if any field is invalid. true if all fields are valid

Upvotes: 3

guest271314
guest271314

Reputation: 1

You can use Array.prototype.every() to call each function, if any function returns false, false will be returned from .every() call

<form name="registration" action="registration.php">
    <!-- some inputs like: -->
<input type="text" id="username" name="username">
<input type="text" id="firstname" name="firstname">
<input type="text" id="lastname" name="lastname">
    <!-- and some others... -->
</form>


function validate() {
    return [checkUsername, 
      checkPassword, 
      checkFirstname, 
      checkLastname, 
      checkBirthdate, 
      checkEmail,
      checkPhone].every(function(check) {return check()});
}

document.querySelector("[name=registration]")
.onsubmit = function(event) { 
  event.preventDefault();
  if (validate()) { this.submit() }
  else { // notify user which fields are invalid }
}

Upvotes: 1

JohnH
JohnH

Reputation: 2133

The "validate" function needs to return a "true" boolean result only when ALL of the individual check functions return a "true" result.

One way to do this is to modify each line in the current "validate" function to something like the following code.

bUsernameSts = checkUsername();
if !bUsernameSts { return false };
...
<other checks>
...
return true;

The only way the new "validate" function can return "true" is if all of the individual input validation checks were successful.

Upvotes: 0

Related Questions