JavaScript Form Validation- in Web Applications

Applications are made reliable and integral by implementing form validation. It ensures that correct data gets stored in the database. The correct data are those values that are allowed when they satisfy application needs or business rules of the organization. Web applications can be enhanced by implementing JavaScript Form Validation to check accuracy of user input in a web form.

Examples of Form Validation

Name is not empty.
Email ID format is accepted as username@domain.com.
Age of user is not less than 18.
Length of remarks cannot be greater than 500 characters.
Password must be more than 8 characters with one numeric and a special character.

JavaScript Form Validation

Web forms can be validated by using JavaScript. You can write a JavaScript function that gets called at the time of form submission to check what went wrong with the user entered data.

To code JavaScript Form Validation, first identify the fields that you need to validate. Next you have to define what kind of validations is required for these fields. The values entered by a user can be checked against a range. It ensures that the user input lies between minimum and maximum values.

The validation can be that you don’t want the user to leave a mandatory field blank. You can use the string.length JavaScript function here. You can check that a date must not be before or after a specific date. You can also validate that input follows a specific pattern. Dates, email Ids, Website URLs are some examples that need pattern matching for validating data.

Operators used for JavaScript Form Validation

All the comparison operators and logical operators are useful in validation. You can use the JavaScript functions to apply on user input data. Alert boxes can be used to inform user about errors in input values.

Comparison Operators

Operator	Meaning	Operator	Meaning
==	Equality of operands	>	Greater than
===	Equality of value and data type of operands	>=	Greater or equal to
!=	Non equality of operands	<=	Less than or equal to
! ==	Non equality of value and data type of operands	<	Less than

Logical Operators

Operator	Meaning
&&	Logical AND
\|\|	Logical OR
!	Logical NOT

Example

User Entry Form

<script>
function checkData() {
  var x, text;
  var td = new Date();
  var emailpat = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
 
  text="Error:<br>"
  // save values in variables
  nam = document.getElementById("empName").value+"";
  age = document.getElementById("empAge").value+"";
  bp = document.getElementById("empBP").value+"";
  qual = document.getElementById("empQual").value+"";
  eml=document.getElementById("empEmail").value+"";
  // check the values for validation and add the validation error message in text by concatenation
  if (nam.length==0) 
  {
	text=text.concat("*Name should not be empty.<br>");
  }
  if (age<18) 
  {
	text=text.concat("*Age should be greater than 18.<br>");
  }
  if (bp<5000) 
  {
	text=text.concat("*Salary must be less than 500.<br>");
  }
  if (qual.length>50) 
  {
	text=text.concat("*Qualification must be between 1 to 50 characaters.<br>");
  }
  if (!emailpat.test(eml)){
		text=text.concat("*Email is incorrect.<br>");
  }
  // diaplay validation error message in the paragraph with id msg
  document.getElementById("msg").innerHTML = text;
}
</script>
<HTML>
Employee Name : <INPUT TYPE="text" id="empName" ><BR>
Age of Employee : <INPUT TYPE="number" id="empAge"><BR>
Basic Pay : <INPUT TYPE="number" id="empBP"><BR>
Qualifications : <INPUT TYPE="text" id="empQual"><BR>
Email ID : <INPUT TYPE="text" id="empEmail"><BR>

<button type="button" onclick="checkData()">Submit</button><BR><BR>
<p  id="msg" style="color:red;"> Error:
</p>

</HTML>