i want to display multiple error in javascript

Question

In my project I have to validate all fields when the form is submitted and display error message on same page in order list above the form field. below is my code but when click enter the data, only one error display at a time. I try multiple solution but not properly work so how do I display multiple error at same time.

function validate() {
  var minnumberofchars = 6;
  var maxnumberofchars = 16;
  var regularexperssion = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  var letters = /^[A-Za-z]+$/;
  var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
  var frname = document.getElementById('fname').value;
  var lrname = document.getElementById('lname').value;
  var fage = document.getElementById('age').value;
  var femail = document.getElementById('email').value;
  var fpassword = document.getElementById('password').value;


  if (frname == "") {

    document.getElementById('error').innerHTML = "enter the first name";
    return false;
  }

  if (!letters.test(frname)) {
    document.getElementById('error').innerHTML = "enter only text";
    return false;
  }
  if (lrname == "") {

    document.getElementById('error').innerHTML = "enter the last name";
    return false;
  }
  if (!letters.test(lrname)) {
    document.getElementById('error').innerHTML = "enter only text";
    return false;
  }

  if (fage == "") {

    document.getElementById('error').innerHTML = "enter the age";
    return false;
  }

  if (isNaN(fage)) {
    document.getElementById('error').innerHTML = "enter the only number";
    return false;
  }

  if (femail == "") {

    document.getElementById('error').innerHTML = "enter the email";

    return false;
  }
  if (!emailRegex.test(femail)) {
    document.getElementById('error').innerHTML = "enter the valid email";
    return false;
  }

  if (fpassword == "") {

    document.getElementById('error').innerHTML = "enter the password";
    return false;
  }

  if (fpassword.length < minnumberofchars || fpassword.length > maxnumberofchars) {
    document.getElementById('error').innerHTML = "password should between 6 to 16 character";
    return false;
  }

  if (!regularexperssion.test(fpassword)) {
    document.getElementById('error').innerHTML = "password should contain atleast one number and one special character";
    return false;
  }
  return true;
}

<a href="index.php">Home</a>
<form method="post" name="form1" action="add.php">

  <table border="0">
    <tr>

      <td>First Name</td>
      <td><input type="text" id="fname" name="fname"></td>

    </tr>

    <tr>
      <td>Last Name</td>
      <td><input type="text" id="lname" name="lname"></td>

    </tr>

    <tr>
      <td>Age</td>
      <td><input type="text" id="age" name="age"></td>

    </tr>

    <tr>
      <td>Email</td>
      <td><input type="text" id="email" name="email"></td>
    </tr>

    <tr>
      <td>Password</td>
      <td><input type="password" id="password" name="password"></td>
    </tr>

    <tr>
      <td><input type="submit" value="ADD" name="submit" onclick="return validate()"></td>
    </tr>
  </table>
</form>
<div id='error' style='color:red'></div>

If you do one of the suggestions below, you will also need to put else in the test for empty and something else to not have Enter password, Enter valid password Lastly NEVER call anything in a for name="submit" - it will hide the submit event handler. Move the return validate() to the onsubmit of the form tag — mplungjan
– mplungjan, Commented Nov 28, 2017 at 6:45

mplungjan · Accepted Answer · 2017-11-28 06:41:24Z

1

In the Validate function, take one variable and instead of returning false just append the error messages to html div or maintain the flag to check the existence of the error and at the end of the function return false if any error exist in the function and show the validations in the div.

function validate() {
  var minnumberofchars = 6;
  var maxnumberofchars = 16;
  var regularexperssion = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  var letters = /^[A-Za-z]+$/;
  var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
  var frname = document.getElementById('fname').value;
  var lrname = document.getElementById('lname').value;
  var fage = document.getElementById('age').value;
  var femail = document.getElementById('email').value;
  var fpassword = document.getElementById('password').value;
  var errorMessages = '';

  if (frname == "") {

    errorMessages += "<br/> enter the first name";
  }

  if (!letters.test(frname)) {
    errorMessages += "<br/> enter only text";
  }
  if (lrname == "") {

    errorMessages += "<br/> enter the last name";

  }
  if (!letters.test(lrname)) {
    errorMessages += "<br/> enter only text";
  }

  if (fage == "") {

    errorMessages += "<br/> enter the age";

  }

  if (isNaN(fage)) {
    errorMessages += "<br/> enter the only number";

  }

  if (femail == "") {

    errorMessages += "<br/>enter the email";

  }
  if (!emailRegex.test(femail)) {
    errorMessages += "<br/>enter the valid email";

  }

  if (fpassword == "") {

    errorMessages += "<br/>enter the password";

  }

  if (fpassword.length < minnumberofchars || fpassword.length > maxnumberofchars) {
    errorMessages += "<br/>password should between 6 to 16 character";
  }

  if (!regularexperssion.test(fpassword)) {
    errorMessages += "<br/>password should contain atleast one number and one special character";

  }
  if (errorMessages != '') {
    // Here You can also use flag to check error existence
    document.getElementById('error').innerHTML = errorMessages;
    return false;
  }

  return true;
}

edited Nov 28, 2017 at 6:41

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Nov 28, 2017 at 6:38

Nais

567 bronze badges

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

2 Comments

mplungjan Over a year ago

You can also do errorMessages = []; and then do errorMessages.push("Error 1"); and at the end document.getElementById('error').innerHTML = errorMessages.join('<br/>');

Vishal Vankar Over a year ago

There are some issue some error not display at once.

gurvinder372 · Accepted Answer · 2017-11-28 06:33:59Z

0

There are two issues here

You are returning false after a validation, so the execution won't move forward.

Replace return false with isValid = false; (initialize this variable in the beginning of the method to true). Return this variable by the end of the method.

You need to use increment-assignment += operator instead of assignment = operator.

For example,

document.getElementById('error').innerHTML += "enter the first name" + "<br>";

Or even better use a variable instead of document.getElementById('error').innerHTML you can assign the value of that variable to the innerHTML of error

answered Nov 28, 2017 at 6:33

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

i want to display multiple error in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related