How to print error message under respective input field using javascript validation in php

javascript php validation

27,042

Solution 1

You can try this code:

It will check errors and returns at last after displaying all error messages if any.

function validateForm() {
    var error = 0;
    var a = document.forms["student_reg"]["name"].value;
    document.getElementById('name_error').innerHTML = '';
    if (a == null || a == "") {
        // alert("Name must be filled out");
        error++;
        document.getElementById('name_error').innerHTML = 'Name must be filled out';
    }

    var b = document.forms["student_reg"]["email"].value;
    document.getElementById('email_error').innerHTML = '';
    if (b == null || b == "") {
        // alert("Email must be filled out");
        error++;
        document.getElementById('email_error').innerHTML = 'Email must be filled out';
    }

    var c = document.forms["student_reg"]["username"].value;
    document.getElementById('username_error').innerHTML = '';
    if (c == null || c == "") {
        // alert("Username must be filled out");
        error++;
        document.getElementById('username_error').innerHTML = 'Username must be filled out';
    }

    var d = document.forms["student_reg"]["password"].value;
    document.getElementById('password_error').innerHTML = '';
    if (d == null || d == "") {
        // alert("Password must be filled out");
        error++;
        document.getElementById('password_error').innerHTML = 'Password must be filled out';
    }

    var e = document.forms["student_reg"]["roll_no"].value;
    document.getElementById('roll_no_error').innerHTML = '';
    if (e == null || e == "") {
        // alert("Roll no must be filled out");
        error++;
        document.getElementById('roll_no_error').innerHTML = 'Roll no must be filled out';
    }

    if(error>0) {
        return false;
    }
    return true;
}

Solution 2

Keep all the name attributes in array and validate in loop. As your ID is related to name attribute, concatenate the name with _error to get the ID of the error placeholder.

function validateForm() {
  var names = ['name', 'email', 'username', 'password', 'roll_no'];
  var errorCount = 0;
  names.forEach(function(el) {
    var val = document.forms["student_reg"][el].value;
    if (val == null || val == "") {
      document.getElementById(el + '_error').textContent = el.toUpperCase().replace('_', ' ') + " must be filled out";
      ++errorCount;
    }
  });
  if (errorCount) return false;
}

<form name="student_reg" method="POST" action="" onsubmit="return validateForm()">
  <p>NAME:</p>
  <input type="text" name="name" value="">
  <span class="error"><p id="name_error"></p></span>

  <p>EMAIL:</p>
  <input type="text" name="email" value="">
  <span class="error"><p id="email_error"></p></span>

  <p>USERNAME:</p>
  <input type="text" name="username" value="">
  <span class="error"><p id="username_error"></p></span>

  <p>PASSWORD:</p>
  <input type="password" name="password" value="">
  <span class="error"><p id="password_error"></p></span>

  <p>ROLL NO:</p>
  <input type="number" name="roll_no" value="">
  <span class="error"><p id="roll_no_error"></p></span>
  <br/>
  <br/>
  <br/>

  <input type="submit" name="submit" value="submit">

</form>

Solution 3

You can iterate through all elements of the form student_reg to validate email and required and print error message under respective input field if no value was set:

const validateForm = () => {
  const form = document.forms['student_reg'],
    inputs = [...form.getElementsByTagName('input')],
    errors = [...form.getElementsByClassName('error')],
    regex = /\S+@\S+\.\S+/,
    setErrorMsg = (str, msg) => `${str.replace('_', ' ')} ${msg}`
  let countErrors = 0

  inputs.forEach((input, index) => {
    // clear all errors
    (errors[index] || '').innerHTML = ''

    // validate email
    if (input.name === 'email' && !regex.test(input.value)) {
      errors[index].innerText = setErrorMsg(input.name, 'should be valid')
      countErrors++
    }

    // validate required
    if (!input.value) {
      errors[index].innerText = setErrorMsg(input.name, 'field is required')
      countErrors++
    }
  })

  return countErrors === 0
}

p {
  font-size: 13px;
  margin: 4px 0 0;
}

.error {
  font-size: 12px;
  padding: 6px 0 4px;
  color: red;
  display: block
}

.error:first-letter {
  text-transform: uppercase
}

button {
  margin-top: 8px;
  font-size: 16px;
}

<form name="student_reg" method="POST" action="" onsubmit="return validateForm()">
  <p>NAME:</p>
  <input type="text" name="name" value="">
  <span class="error"></span>

  <p>EMAIL:</p>
  <input type="text" name="email" value="">
  <span class="error"></span>

  <p>USERNAME:</p>
  <input type="text" name="username" value="">
  <span class="error"></span>

  <p>PASSWORD:</p>
  <input type="password" name="password" value="">
  <span class="error"></span>

  <p>ROLL NO:</p>
  <input type="number" name="roll_no" value="">
  <span class="error"></span>

  <button>Submit</button>
</form>

27,042

Author by

mickey

Updated on July 13, 2022

Comments

mickey almost 2 years

How to print error message under respective input field if left empty and error message must be removed when filled, how to proceed further i have not used javascript for validation earlier.

script code

function validateForm() {
    var a = document.forms["student_reg"]["name"].value;
    if (a == null || a == "") {
        alert("Name must be filled out");
        return false;
    }
     var b = document.forms["student_reg"]["email"].value;
     if (b == null || b == "") {
        alert("Email must be filled out");
        return false;
    }
     var c = document.forms["student_reg"]["username"].value;
     if (c == null || c == "") {
        alert("Username must be filled out");
        return false;
    }
     var d = document.forms["student_reg"]["password"].value;
     if (d == null || d == "") {
        alert("Password must be filled out");
        return false;
    }
     var e = document.forms["student_reg"]["roll_no"].value;
     if (e == null || e == "") {
        alert("Roll no must be filled out");
        return false;
    }
}

html code is here

<body>

 <a href="login.php">Login</a>
        <form name="student_reg" method="POST" action="" onsubmit="return validateForm()">
                <p>NAME:</p>
                <input type="text" name="name" value="" >
                <span class="error"><p id="name_error"></p></span

                <p>EMAIL:</p>
                <input type="text" name="email" value="" >
                <span class="error"><p id="email_error"></p></span

                <p>USERNAME:</p>
                <input type="text" name="username" value="" >
                <span class="error"><p id="username_error"></p></span

                <p>PASSWORD:</p>
                <input type="password" name="password" value="" >
                <span class="error"><p id="password_error"></p></span

                <p>ROLL NO:</p>
                <input type="number" name="roll_no" value="" >
                <span class="error"><p id="roll_no_error"></p></span
                <br/>
                <br/>
                <br/>

                <input type="submit" name="submit" value="submit">

 </form>
 </body>