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 Facebook, Twitter, Tumblr. 

Comments

Post a Comment

Popular posts from this blog

Calculate Your CTC Salary Hike Percentage - Online Calculator to find your New Salary

-
Image
  Did you receive a Salary Hike? Congratulations!  Using this CTC Hike Percentage calculator you can calculate: Percentage Hike Received New Expected Salary Old Salary (yes, you already know it! But if you want to compare, we've included that feature as well!) Receiving a Salary Hike is a really happy occasion. It means that your work is valued in your organization and the organization is willing to invest in you and your career growth. But as any human being, you are interested in exactly how much you have received. Most organizations provide either a lump sum amount in the hike letter or mention a percentage. Employees are left wondering that if I have received a certain amount of hike, what exactly is the percentage when compared to my old or previous salary. In the same way, if percentage is mentioned, then the employee is left wondering what will be my new salary.  So, we have a very simple solution for y...
Read more

Find the Longest Streak of 1's in a Binary Array using Java Code

-
Image
  You have been given an Integer Array which contains only 1s and 0s, and asked to find the longest running streak of 0 or 1 in the array. Sound familiar? Its a common interview question. Let's try to find a solution using Java.  We would required two counters here, 1 counter to keep track of the running count, and the second one to keep track of the maximum running streak found.  We'll loop through the array using a for loop.  Here is the code for your reference: /**  * Find the longest Streak of 1s  * @author computengine.com  * @param a  * @return the length of the longest streak  */ public int findLongestStreak ( int [ ] b ) { System . out . println ( " Array for processing: " + Arrays . toString ( b ) ) ; int count = 0 , max = 0 ; //loop through the array for ( int i = 0 ; i < b . length ; i + + ) { //increment count when 1 is found if ( b [ i ] = = 1 ) count + = 1 ; //if count is greater...
Read more

Java Program to read Excel File and Load into Array

-
Image
Excel is one of the most important productivity tools used in offices. It is also a great organizational tool, and its really easy to create tables in excel to store different kinds of data.  When doing automation, excel is an important tool to store data for automation scripts, which makes reading Excel data using Java code an important Interview Question. So, today we'll learn how to read an excel sheet using Java, and return the contents as a String Array. The Array can then be utilized as per your requirement.  We are reading an xlsx file, the most recent and most popular excel format. We need to import the below classes: import java . io . File ; import java . io . FileInputStream ; import org . apache . poi . xssf . usermodel . XSSFCell ; import org . apache . poi . xssf . usermodel . XSSFRow ; import org . apache . poi . xssf . usermodel . XSSFSheet ; import org . apache . poi . xssf . usermodel . XSSFWorkbook ; java.io.File and java.io.FileInputStream will ...
Read more

Java Program to Read a Properties file and return a Property Value

-
Image
  Properties file in Java is used to store configurations, data or settings for a project. They have been utilized as Object Repositories for Automation Projects in the past (and still are used in legacy projects) until the Page Object Model came along.  This makes reading of Properties files an important concept in Java. This Tutorial will cover the below topics: 1. Create  Properties file in a Java Project 2. Set Properties in the file 3. Read the Properties file using Java code and return the value Let's first see how to create a Properties file for your Project. Its really easy.  In Eclipse, right click on the folder where you want to create the file, and navigate to New -> File. Now enter the file name, and make sure to enter the extension as .properties The file has been created! Now, the next step, i.e. enter some data in the file that we'll read using Java. The properties stored in the properties file have to follow a certain format.  You can enter l...
Read more

4 ways to add New Line Character to a String in Java

-
Image
When you are required to output Strings with your Java code, more often than not, there is a requirement to format the output correctly.  Adding a newline character between two strings in order to separate them, or create a paragraph is one of the most common requirements. Let's look at a few ways today, on how to output a newline between two Strings. 1. System.out.println inbuilt function One of the easiest ways, is to use the function System.out.println(). The println() function will automatically add a new line to the output, if using two strings.  Sample: String s1 = "This is a String." ; String s2 = "This is another String." ; System . out . println ( s1 ) ; System . out . println ( s2 ) ; If you don't want to use a separate System.out.println for every String, there are other ways as well. Read on! 2. Add a newline character "\n" You can simply append newline character yourself to the strings, and use a single System.out.print command...
Read more