JavaScript Input Field Validation Function with Input field color highlight and Error Message Display

 


We use a lot of Forms regularly. If you are using a Form in your website, have you ever tried to create some validations on the form so that the inputs made by user can be checked? There are a lot of libraries out there which can help you do the input validation using JavaScript, but that is additional code that needs to be included, and third party libraries can often slow down your page load speeds. 

Today, we'll write a small JavaScript function that we can include in our website and which does the input validation very quickly and efficiently. This function also highlights the input field in a color of your choice, and you can display an error message to your end user.

If you have a form with multiple fields, and want to run validations on all of them, you'll have to loop through the fields one by one using a for loop, and run the validation on each one. 

You can pass the field ID to the function and run the validation on it. 

Below is our function which will do the validation: 

/**
 * This function is the using the inbuilt javascript checkValidity method for form validation instead of relying on custom methods.
 * @param {*} fieldId
 * @author computengine.com
 */
function run_js_val(fieldId)
{
  //initialize variables
  var inpObj,validation_pass,err;
  inpObj = document.getElementById(fieldId);
  validation_pass = true;
  inpObj.style.backgroundColor = "";

  //run inbuilt checkvalidity function which will validate fields as per the attributes set
  if (!inpObj.checkValidity()) 
  {
    //if validation fails set value to false
    validation_pass = false;

    //highlight the field having issue
    inpObj.style.backgroundColor = "pink";
	
    //error message
    err = "<b>"+inpObj.name+"</b>: "+inpObj.validationMessage;
    //update the innerhtml with the message/result 
    document.getElementById("error_msg_div").innerHTML = err;
} return validation_pass; }


As you can see, the background color of the input field having error will be highlighted to pink color. 

To understand the code, we are passing the fieldId for the input field we want to run the validation on. 

We are running the JavaScript inbuild checkValidity() function on the fields. For eg. 

<input class="w3-input" id="field_2" max="9999999999" min="0.001" name="Area of Square" none="" placeholder="Enter the Area of the Square" step="0.001" type="number"/>

In this Input field, the Id is set as field_2, and we have defined the max and min values and the input type as number. So checkValidity function will check the input against these values. If there is an issue, the if condition will fail. 

In case of failure, we are updating the validation_pass as false, and returning the false value. You can use this to false value to fail the form validation. 

The function will also set the input background color as pink which will highlight the error field to the end user. 

If you have a <div> section on your page for error message display, the function can update the error message there. The sample code is included for the functionality as well. 

Super! Isn't that cool! We have successfully created our own function which will validate our form and highlight the error fields. It can update an error message on the web-page as well. 

You can go ahead and modify the function to suit your website's needs.

Thanks for Reading the Article. If you have reached this far, we hope that the article was useful to you! Please Like/Share/Follow us on FacebookTwitterTumblr. 

Comments

Popular posts from this blog

Calculate Your CTC Hike Percentage

Java Program to Find a List of Prime Numbers (Step by Step)

Java Program to check Palindrome

What is my IP Address - How to find your IP address on Local Network using Command Prompt, and External Network using JavaScript Code

Reduce Server Load from Dynamic Page Search - Create a Dynamic JavaScript based Table filter