Html Question posted in
Some basic documentation can be found here.

Html – How can display a custom message under the inputs field when a user clicks on submit while empty

I have a form with five inputs with with two text fields one password field one email field and the other is a submit button and i want the form not to submit when the the fields are empty and also display first name cannot be empty, last name cannot be empty,email cannot be empty and password cannot be empty under each corresponding fields and also check if the email is in a right format .

I tried the code below expecting to display the messages in the p elements when the field is empty but instead the browser refreshes the page with displaying the message in the p elements

fname = document.querySelector("#first-name");
lname = document.querySelector('#last-name');
email = document.querySelector('#email');
password = document.querySelector("#password");

function formValidator() {
  if (fname.value = '') {
    document.getElementById('first-p').innerHTML = "First name cannot be empty"
  };
  if (lname.value = '') {
    document.getElementById('last-p').innerHTML = 'Last name cannot be empty'
  };
  if (email.value = '') {
    document.querySelector('#email-p').innerHTML = 'Email cannot be empty'

  };
  if (password.value = '') {
    document.querySelector('#password-p').innerHTML = 'Password cannot be empty'

  }


}
<form action="">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name">
  <p id="first-p"></p>
  <br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name">
  <p id="last-p"></p>
  <br>
  <label for="Email">Email:</label>
  <input type="email" name="" id="email">
  <p id="email-p"></p>
  <br>
  <label for="password">Password:</label>
  <input type="password" name="" id="password">
  <p id="password-p"></p>
  <br>
  <input type="submit" value="Submit" onsubmit="formValidator()">
</form>
Tags:

4

Answers


  1. 0
    1. move onsubmit to form element,
    2. return false from formValidator in case of you wat to stop the submit to continue.
    3. replace = with == operator in all your ‘if’ statement

    correct code is given below

       <form onsubmit="return formValidator()">
    <label for="first-name">First name:</label>
    <input type="text" id="first-name">
    <p id="first-p"></p>
    <br>
    <label for="last-name">Last name:</label>
    <input type="text" id="last-name">
    <p id="last-p"></p>
    <br>
    <label for="Email">Email:</label>
    <input type="email" name="" id="email">
    <p id="email-p"></p>
    <br>
    <label for="password">Password:</label>
    <input type="password" name="" id="password">
    <p id="password-p"></p>
    <br>
    <input type="submit" value="Submit" >
    </form>

    <script>
    fname = document.querySelector("#first-name");
    lname = document.querySelector('#last-name');
    email = document.querySelector('#email');
    password = document.querySelector("#password");

    function formValidator() {
    let isError = false;
    if (fname.value == '') {
        document.getElementById('first-p').innerHTML = "First name cannot be empty"
        isError = true;
    };
    if (lname.value == '') {
        document.getElementById('last-p').innerHTML = 'Last name cannot be empty'
        isError = true;
    };
    if (email.value == '') {
        document.querySelector('#email-p').innerHTML = 'Email cannot be empty'
        isError = true;
    };
    if (password.value == '') {
        document.querySelector('#password-p').innerHTML = 'Password cannot be empty'
        isError = true;
    }

        if (isError) {
            return false;
        }

    }
    </script>
    Login or Signup to reply.
  2. 0

    A form by default on a submit refreshes the page
    To prevent this, use event.preventDefault()

    function formValidator(event) {
    event.preventDefault();
    //the rest of your code

    <form onsubmit="formValidator(event)">
<!--eveything else the same-->
  <input type="submit" value="Submit">
</form>
    Login or Signup to reply.
  3. 0

    All you have to do is to add required attribute to your inputs. no need to js.
    for example:

    <input type="email" required id="email">

    required uses browsers default validation, which varies by the inputs type

    Hope I helped.

    Login or Signup to reply.
  4. 0

    First thing: As @mplungjan mentioned, you should be using the required attribute in the input fields.

    Second: Sometimes we do things in our own way. So below is something you might try. I hope it will help.

    You can try below:

    fname = document.getElementById("first-name");
lname = document.getElementById('last-name');
email = document.getElementById('email');
password = document.getElementById("password");


function formValidator() {
    if (fname.value.length == 0) {
      document.getElementById('first-p').innerHTML = "First name cannot be empty";
    }
    if (lname.value.length == 0) {
      document.getElementById('last-p').innerHTML = 'Last name cannot be empty';
    }
    if (email.value.length == 0) {
      document.getElementById('email-p').innerHTML = 'Email cannot be empty';

    }
    if (password.value.length == 0) {
      document.getElementById('password-p').innerHTML = 'Password cannot be empty';
    }
}
    <form action="" onsubmit="event.preventDefault(); formValidator();">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name">
  <p id="first-p"></p>
  <br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name">
  <p id="last-p"></p>
  <br>
  <label for="Email">Email:</label>
  <input type="email" name="" id="email">
  <p id="email-p"></p>
  <br>
  <label for="password">Password:</label>
  <input type="password" name="" id="password">
  <p id="password-p"></p>
  <br>
  <input type="submit" value="Submit" id="submitform">
</form>

    I hope it will help. Thank you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search