Form Validation in JavaScript

Form Validation is usually used on the Server, after the Client has entered all necessary data and then click the Submit button. If the data entered by a Client is incorrect or corrupted, the Server must send all data back to the Client and request that the Form be submitted with the correct information. This is really a long process that puts a lot of burden on the Server.

JavaScript provides a way to verify Form data on a Client's computer before sending it to the Web Server. Form Validation generally performs two functions:

1. Basic Form Validation - First, the Form must be checked to ensure that all required fields are fully entered. It will require only one loop through each field in the Form and check the data.
2. Data Format Validation - Second, the entered data must be checked for the accuracy of the Form and the value. Your code must be logically appropriate to check the accuracy of the data.

For example

We will look at the following example to understand the evaluation process. Here is a simple form in HTML format.

 Form Validation  type = "text/javascript" >   action = "webpage.jsp" name = "myForm" onsubmit = " return ( validate ()); " >  cellspacing = "2" cellpadding = "2" border = "1" >  align = "right" > Name  type = "text" name = "Name" />  align = "right" > EMail  type = "text" name = "EMail" />  align = "right" > Zip Code  type = "text" name = "Zip" />  align = "right" > Country  name = "Country" >  value = "-1" selected > [choose yours]  value = "1" > USA  value = "2" > UK  value = "3" > INDIA  align = "right" >  type = "submit" value = "Submit" /> 

Result

Run the above command to see the result

Basic Form Validation

First we see how to implement a Basic Validation. In the above form, we are calling validate () to verify the data when the onsubmit event is taking place. The following code shows the implementation of the validate () function.

  type = "text/javascript" >  

Data Format Validation

We will now see how to verify the form data entered before submitting it to the Web Server.

The following example shows how to verify an email address entered. An email address must contain at least one '@' symbol and one dot (.). In addition, '@' is not the first character of the email address, and the last dot must be at least one character after the '@' symbol.

For example

You try the following code for Email authentication:

  type = "text/javascript" >  

According to Tutorialspoint

Previous article: Handling errors in JavaScript

Next article: Animation in JavaScript