Form Validation with JavaScript

With the help of HTML, CSS, and JavaScript a form can be made which will do functioning validations. These validations will check on whether the email is in the right format or not and the entered password matches the section of the re-enter password section or not. If the input value does not meet the validation criteria, then it will also display an error message.

Setting up HTML and CSS

A structured HTML code is needed to build up the form for the user interface which is eventually needed to be styled with CSS to make it attractive.

In the HTML file, we need form divisions consisting of label tag, input tag, two I tags, and a small tag.

Make sure to build up to four form divisions ( i.e., Username, Email I.D, Password and Check Password ) with suitable classes and id tags to make it feasible for styling and selecting in JavaScript.

Example:

<form class="form" id="form">

        <div class="form-control">

          <label>Username</label>

          <input type="text" placeholder="User Name" id="username" />

          <i class="fas fa-check-circle"></i>

          <i class="fas fa-exclamation-circle"></i>

          <small>Error Message</small>

        </div>

  </form>

In the above code the I tags are used to get icons of check and exclamatory mark, for this make sure to link font awesome to your HTML file. 

For styling the form, do it according to your choice to make it look better for the user. Make sure to put icons and small tags in the position of absolute because it will be hidden at first and will only be displayed under specific conditions.

Example:

.form-control i{

    position: absolute;

    top:37px; //to place it in the end of the text area

    right: 10px; //to place it in the end of the text area

}




.form-control small{

    position: absolute;

}

After setting up all the elements of form properly, make the visibility of small and icon tags hidden so that it will have its place occupied but its visibility can be altered with JavaScript later on.

Next, add a class of success to one <div class="form-control> and error to another <div class="form-control> then add up CSS according to it to display color green and the check icon on the class of success and red color with the exclamation mark and also the error message on the class of error.

The end result of HTML and CSS:

Setting up JavaScript

The first thing needed is to target all the elements we have in the HTML which we want to change or alter.

Example:

  const    usernameValue  =  username.value.trim();

    const    emailValue  =  email.value.trim();

    const    passwordValue  =  password.value.trim();

    const    password2Value  =  password2.value.trim();

Add an event listener to the submit button which will call a function as well as prevent from reloading the page.

Example:

form.addEventListener('submit', (e)=>{

    e.preventDefault();

    checkInputs();

});

In the checkInput();  function gets all the trim values and pass them under conditional rendering to check whether it fulfills the needed criteria or not and on the basis of that call another function to add a class of error with an error message as well as a class of success with the help of JavaScript.

Checking User Name

Create an if & else statement to call a function with arguments passing through it, to change the error message, and add the error class when the username is empty and add success class when the username is not empty.

Checking Email ID

Setting up condition rendering for checking email id can be a bit tricky. It is required to check the email input section by considering few aspects that are: the email id section should not be empty and the email id should be valid.

For handling empty text repeat the part same as the username and for handling whether the email id is valid or not, a custom function is needed which will consist of regex code

That is:

function isEmail(email) {

  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(

    email

  );

}

Now set up the if-else if statements to carry out further.

Checking Password and Password Check

Check the password similarly like for the username.

Set up conditional rendering for empty input value and filled input value

(you can also have customized rendering for the password input, such as deciding minimum words, special characters and many more with the help of setting up regex value in a function just like for email id)

  if(passwordValue === ""){

    setErrorFor(password, "Password cannot be empty");

  }else{

    setSuccessFor(password);

  }

For checking password check get it into 2 conditional renderings. One will check blank spaces, another will check whether the values of password and password2 are the same or not and the last one will give it a successful class.

if(password2Value === ""){

    setErrorFor(password2, "Password cannot be empty");

  }else if (passwordValue !== password2Value){

    setErrorFor(password2, "Password is different"); 

  }else{

    setSuccessFor(password2);

  }

Final Product:

Link for the code: Form Validation