JQuery HTML FORM validation

Today is yet another interesting JQuery Walk-through; how to validate HTML forms using JavaScript.

JavaScript is one of the best methods for validating HTML forms. Everything is handled on the browser’s client-side and no need to bother the server hence minimal bandwidth usage.

Instead of validating each input of an HTML element at a time, we can validate all of them at once on a button click. You can improve creativity and check if everything is okay as user types on the input field or as the user select option changes.

Under this article,  we are going to validate HTML form on a button click using jquery. That means, whether a form has an error or not, will be determined during the submit button click

The image below illustrates what we are expecting to achieve at the end of this article.

JQuery HTML FORM validation



Best Way to Validate HTML Forms using JavaScript (JQuery)


Kindly create a new HTML file and name it index.html, this will be our homepage where we will create our form. Add the following code

<!DOCTYPE html>
  <title>Form Validation</title>
  <script src="jquery.js"></script>
  <script src="script.js"></script>

      background: #e1e1e1; 
      padding: 10px;

      background: white; 
      width: 500px; 
      padding: 1.5rem;
      margin: 0 auto;
      min-height: 250px;

      padding: 0;
      list-style: none; 

      margin-bottom: 1rem; 

      color: red;
      display: inline-block;
      margin-left: .5rem; 

      border: 1px solid red;
      color: red;

      padding: .25rem;

  <div class="container">
    <h1 style="text-transform: uppercase; text-align: center;">JQuery Form Validation</h1>


      <li><input type="text" name="name" id="name" placeholder="Enter Name"> <span></span></li>
      <li><input type="text" name="email" id="email" placeholder="Enter Email"> <span></span></li>
      <li><input type="password" name="password" id="password" placeholder="Enter Password"> <span></span></li>
      <li><input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm Your Password"><span></span></li>
        <select name="gender" id="gender">
          <option value="">-Select Your Gender-</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
      <li><input type="submit" name="submit"  id="submit" value="Submit"></li>

Time to validate the above form with JQuery. Make sure you include relevant scripts and jquery as shown in the code above. You can grab the latest version of JQuery from their website.

Add the following code into your scripts.js file; this is our custom javascript file.

  // lets test this 

  var isOkayName 				= false;
  var isOkayEmail 			= false;
  var isOkayPassword 			= false;
  var isOkayConfirmPassword 	= false;
  var isOkayGender 			= false; 


    var name 			= $("#name").val();
    var email 			= $("#email").val();
    var password 		= $("#password").val();
    var confirmPassword = $("#confirm-password").val();
    var gender			= $("#gender").val();

    if(name == ""){
      error("name", "this is a required field")
       isOkayName = false; 
    } else {
       isOkayName = true; 

    if(email == "" || email.indexOf("@") < 0 ||  email.indexOf(".")  < 0 ||  email.indexOf(" ") >=0 ){
      error("email", "Invalid email address"); 
      isOkayEmail = false; 
    } else {
      isOkayEmail = true; 

    if(password == ""){
      error("password", "This is a required field"); 
      isOkayPassword = false; 
    } else {
      isOkayPassword = true; 

    if(password != confirmPassword){
      error("confirm-password", "Your password did not match"); 
      isOkayConfirmPassword = false; 
    } else {
      isOkayConfirmPassword = true; 

    if(gender == ""){
      error("gender", "Please select your gender"); 
      isOkayGender = false; 
    } else {
      isOkayGender = true; 

    // now we nee to submit the form if everything is okay

    if(isOkayName && isOkayEmail && isOkayPassword && isOkayConfirmPassword && isOkayGender){
      // everything looks promising, you can now submit your form to the databases
      alert("Form submited"); 
  // now we validating


function error(id, errorText){
  // this is the css id <input type='' name='' id='id' /> 
  $("#"+id).next().show().html("<span class='error'>"+errorText+"</span>"); 

function clearError(id){

The explanation for the form validation using JQuery

from the index.html file, you can see this line of code.

<li><input type="text" name="name" id="name" placeholder="Enter Name"> <span></span></li>

Each and every list in the HTML has an empty span tag .i.e <span></span>. It has been preserved for showing the error.

From our script.js on the error function, we’re getting the id of the form input and if there is an error, we get the next element (which in our case is the empty span tag) and display the error.

$("#"+id).next().show().html("<span class='error'>"+errorText+"</span>");

If there is no error, we just hide the next element (<span></span>) from the input specified id input


we’ve also created the CSS class for indicating the errors on the specified input of the form element

border: 1px solid red;
color: red;

then using the javascript we can add this class (.error-indicator) to the form element dynamically every time an error is raised


Also, the error text is made possible by the following CSS class.

  color: red;
  display: inline-block;
  margin-left: .5rem; 


The code itself is self-explanatory.

In case there is anything that’s not clear please feel free to ask in the commenting system below, I will reply withing shortest time possible.

Happy coding


Similar Posts