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>

Answer 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;
}

Answer 2

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