All geek questions in one place

JavaScript form validator function not working properly

I tried to make this function work for two hours, but I can not find where the error is.

This behaves unexpectedly.

When any field in the form is filled in, the form is sent to the php file and shows errors (as expected) only when all fields remain empty, i.e. 5 errors.

But when any of the 6 fields is filled in, the form is published regardless of other errors in the form.

Please help me verify this form.

error - information about errors that I will show to users. errors - the number of errors found.

JavaScript function

 function formValidator(){ var elementValue = document.getElementById("first-name").value; var elementName = document.getElementById("first-name"); var errors = 0; var error = " "; if (elementValue == "" || elementValue == " " || elementValue== NULL){ error = "First Name shouldn't be left empty."; errors = 1; } var elementValue = document.getElementById("last-name").value; var elementName = document.getElementById("last-name"); if (elementValue == "" || elementValue == " " || elementValue== NULL){ if (errors == 0){ error = "Last Name shouldn't be left empty."; } else{ error += "<br>Last Name shouldn't be left empty."; } errors+=1; } var elementValue = document.getElementById("email-for-registration").value; var elementName = document.getElementById("email-for-registration"); var email_err = "false"; if (elementValue == "" || elementValue == " " || elementValue== NULL){ email_err = "true"; } var elementValue = document.getElementById("phone-for-registration").value; if ((elementValue == "" || elementValue == " " || elementValue== NULL) && email_err == "true"){ if (errors == 0){ error = "Both email and contact cannot be left empty."; } else{ error += "<br>Both email and contact cannot be left empty."; } errors+=1; } var elementValue = document.getElementById("password-for-registration").value; var elementName = document.getElementById("password-for-registration"); if (elementValue == "" || elementValue == " " || elementValue== NULL){ if (errors == 0){ error = "Password shouldn't be left empty.\nSelect a strong password atleast 6 characters long."; } else{ error += "<br>Password shouldn't be left empty.Select a strong password atleast 6 characters long."; } errors+=1; } else if (elementValue.length<6){ if (errors == 0){ error = "Password less than 6 characters aren't allowed for security reasons."; } else{ error += "<br>Password less than 6 characters aren't allowed for security reasons."; } errors+=1; } email_err = document.getElementById("confirm-password-for-registration").value; var elementName = document.getElementById("confirm-password-for-registration"); if (elementValue != email_err){ if (errors == 0){ error = "The password to confirm doesn't match with your desired password."; } else{ error += "<br>The password to confirm doesn't match with your desired password."; } errors+=1; } var elementValue = document.getElementById("agreed-for-registration"); var elementName = document.getElementById("agreed-for-registration"); if (!elementValue.checked){ if (errors == 0){ error = "Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue."; document.getElementById("agreed-for-registration").focus(); } else{ error += "<br>Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue."; } errors+=1; } alert(errors); if (errors > 1){ document.getElementById("form_errors").innerHTML = "<h4 style='color:red;'>Please remove the following errors from form to continue.</h4>"; document.getElementById("form_errors").innerHTML += "<h5>" + error + "</h5><br>"; return false; } else if (errors == 1){ alert(error); elementName.focus(); return false; } else if (errors == 0){ return true; } return false; }

Function called here.

 <form name="registration" class="deco_blu_form" action="<?=$base_url;?>forms/confirm-registration/members.php" method="post" onsubmit="return formValidator();">

Please ask if any other information, code or explanation is required.

+4
source share
2 answers

Fiddle

You need to have elementValue === "NULL" or elementValue == null

I put console.log instead of a warning and onblur trigger just for me to make it easier to debug.

So the full code:

 function formValidator() { var elementValue = document.getElementById("first-name").value; var elementName = document.getElementById("first-name"); var errors = 0; var error = " "; if (elementValue == "" || elementValue == " " || elementValue === "NULL") { error = "First Name shouldn't be left empty."; errors = 1; } var elementValue = document.getElementById("last-name").value; var elementName = document.getElementById("last-name"); if (elementValue == "" || elementValue == " " || elementValue === "NULL") { if (errors == 0) { error = "Last Name shouldn't be left empty."; } else { error += "<br>Last Name shouldn't be left empty."; } errors += 1; } var elementValue = document.getElementById("email-for-registration").value; var elementName = document.getElementById("email-for-registration"); var email_err = "false"; if (elementValue == "" || elementValue == " " || elementValue === "NULL") { email_err = "true"; } var elementValue = document.getElementById("phone-for-registration").value; if ((elementValue == "" || elementValue == " " || elementValue === "NULL") && email_err == "true") { if (errors == 0) { error = "Both email and contact cannot be left empty."; } else { error += "<br>Both email and contact cannot be left empty."; } errors += 1; } var elementValue = document.getElementById("password-for-registration").value; var elementName = document.getElementById("password-for-registration"); if (elementValue == "" || elementValue == " " || elementValue === "NULL") { if (errors == 0) { error = "Password shouldn't be left empty.\nSelect a strong password atleast 6 characters long."; } else { error += "<br>Password shouldn't be left empty.Select a strong password atleast 6 characters long."; } errors += 1; } else if (elementValue.length < 6) { if (errors == 0) { error = "Password less than 6 characters aren't allowed for security reasons."; } else { error += "<br>Password less than 6 characters aren't allowed for security reasons."; } errors += 1; } email_err = document.getElementById("confirm-password-for-registration").value; var elementName = document.getElementById("confirm-password-for-registration"); if (elementValue != email_err) { if (errors == 0) { error = "The password to confirm doesn't match with your desired password."; } else { error += "<br>The password to confirm doesn't match with your desired password."; } errors += 1; } var elementValue = document.getElementById("agreed-for-registration"); var elementName = document.getElementById("agreed-for-registration"); if (!elementValue.checked) { if (errors == 0) { error = "Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue."; document.getElementById("agreed-for-registration").focus(); } else { error += "<br>Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue."; } errors += 1; } console.log(errors) if (errors > 1) { document.getElementById("form_errors").innerHTML = "<h4 style='color:red;'>Please remove the following errors from form to continue.</h4>"; document.getElementById("form_errors").innerHTML += "<h5>" + error + "</h5><br>"; return false; } else if (errors == 1) { alert(error); elementName.focus(); return false; } else if (errors == 0) { return true; } return false; }
+3
source

First, I count the following fields:

  • first name
  • last name
  • electronic exchange for registration
  • phone-for-registration
  • password for registration
  • confirm-password for combination
  • agreed to align

Just in case, if you are doing something with an absolute value.

I built a small proof-of-concept script and came across the fact that this script does not work unless you have an element with id #form_errors. Could this be your problem? Thus, calling document.getElementById("form_errors") will result in undefined, and the function will not return false .

The same checks for undefined elements, of course, are preserved for other fields;)

0
source

Source: https://habr.com/ru/post/1488272/

More articles:


All Articles