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

 

DOWNLOAD CODE (EXAMPLE)

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




  Form Validation
  
  

  



  

JQuery Form Validation

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.

$(function(){
  // lets test this 


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

  $("#submit").click(function(){

    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 {
      clearError("name"); 
       isOkayName = true; 
    }

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

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

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

    if(gender == ""){
      error("gender", "Please select your gender"); 
      isOkayGender = false; 
    } else {
      clearError("gender");
      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  
  $("#"+id).next().show().html(""+errorText+""); 
  $("#"+id).addClass("error-indicator"); 
}

function clearError(id){
  $("#"+id).next().hide(); 
  $("#"+id).removeClass("error-indicator"); 
}


The explanation for the form validation using JQuery

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

  • Each and every list in the HTML has an empty span tag .i.e . 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(""+errorText+"");

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

    $("#"+id).next().hide();

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

    .error-indicator{
    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

    $("#"+id).addClass("error-indicator");

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

    .error{
      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



     

    The post JQuery HTML Form Validation appeared first on Hack Smile.

    Author: BamDownload