Hi, I am AbhishekRanjan a web designer working in a company in Delhi and studying UI development and Responsive Website designing in this institute to excel my knowledge of JavaScript, jQuery, and Bootstrap to the advanced level.

What is Form Validation?

Form validation is the process of checking that a form has been filled in correctly before it is processed, this is called form validation.

What you need to know before from validation?

• HTML

• CSS

• JavaScript

Note:-

you don't have knowledge of HTML, CSS & JavaScript than you may face some difficulties in validating a HTML form yet I will make the entire step very easy to understand by you.

Ok let’s start form Validation

There are main two methods of validating form:

1. Server side method
2. Client side method

Server-side: -

This validation is more secure but often more tricky to code because it takes down the performance of the website. It is compulsory to add in a web form but along with the clientside validation. It is important when a hacker disables the JavaScript then serverside validation protects your website.

Client-side (JavaScript) :

validation is easier to do and quicker too (the browser doesn't have to connect to the server to validate the form, so the user finds out instantly if they've missed out that required field!).

JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions.

# Basic Validation -
First of all, the form must be checked to make sure data was entered into each form field that required it. This would need just loop through each field in the form and check for data.

# Data Format Validation -
Secondly, the data that is entered must be checked for correct form and value. This would need to put more logic to test correctness of data.

A Simple Form with Validation

Let's build a simple form with a validation script. The form will include more than one inputbox, select-box, checkbox, radio-button, drop-down-box, message-box, reset-button and a submit button. Our validation script will ensure that the users enter their proper information before the form is sent to the server.

Example:

HTML form:

//Below I used method, action, onsubmit="return validation(this) in HTML first line which is necessary for Form:

Ok now,

First tell you what is a method?
Methods are the action that can be performed on objects through which a browser sends form information to Server.
There are two types of methods:-

1. Post

2. Get

Post method:

Post method is used for sending information to server. All programmers use mainly post method because it is secure and can transfer unlimited information.

Get method:

Get method is used for sending information to server too. Get method is less-securethan Post method.

Action:

Action is an form attribute where we assign a PHP file generally and this file capture the data submitted from this form and then validate it for the further uses.

onsubmit:-

onsubmit is an event of JavaScript, it monitors for the submit action. As someone clicks on

 <form method="post" action="http://www.admecindia.co.in" onsubmit="return validation(this)">
Name:<input type="text" name="name" /><br />
Phone:<input type="text" name="phone" /><br />
Email:<input type="text" name="email" /><br />
Gender:<input type="radio" value="male" name="gender" >Male
<input type="radio" value="female" name="gender" >Female<br />
Reference:<input type="checkbox" value="tv" name="tv" >TV
<input type="checkbox" value="radio" name="radio" >Radio<br />
Course: <select name="course">
    <option value="">Select Please</option>
    <option value="Graphic">Graphic</option>
    <option value="Web">Web</option>
    <option value="Animation">Animation</option>            
</select><br />
Comments: <textarea rows="5" cols="10" name="comm"></textarea><br />
<input type="submit" value="Submit">
<input type="reset" value="Reset">
 </form>

JavaScript:

I am going to create a function with the name of validation and it has a parameter in it. This parameter will be replace with ‘this’ keyword in form’s ‘onsubmit’ attribute so it will point to the form. I will be collecting all the values first and then add conditions to check one by one using ‘if’ conditional so that I can show all the errors at a time. You will notice a regular expression pattern too in this form validation in JavaScript code.

<script type="text/javascript">
//lets create a function
function validation(arg){
    // arg is used to pass value
    vargName = arg.name.value;
    //Get the value of name(selecter) and put in gName(variable)    
    vargPhone = arg.phone.value;
    //Get the value of phone(selecter) and put in gPhone(Variable)
    vargEmail = arg.email.value;
    //Get the value of email(selecter) and put in gEmail(Variable)
    vargComm = arg.comm.value;
    //Get the Value of comm(selecter) and put in gComm (Variable)           
        varePat = /^[a-z-._0-9]+@[a-z0-9]+\.[a-z.]{2,5}$/;
/*  ^[a-z-._0-9] ->Reg Ex is use to allow use only a-z , . , _ and 0-9 digits.
+@     ->            "+" is for concatinet @
[a-z0-9]  ->Reg ex is use to allow to use only a-z and 0-9 digits */
        varnamePatDt = /\./;
//Find a single character, except newline or line terminator
        varnamePatDgt = /\d/;
//Only digits find
        var err = "";
// err variable is used to show error message.
        varerrNum = 0;
// errNum variable is used to show error    
  index         
if (gName == "" || gName.length< 3 || namePatDt.test(gName) || namePatDgt.test(gName)) {
        errNum++;
        err += errNum + ". Invalid name.\n";
        }
 /*  This code check the value : If Value empety  or value length less than 3 or  value is digit than Show error Indvalid Name  */
        if (gPhone == "" || gPhone.length< 8 || isNaN(gPhone)) {
        errNum++;
        err += errNum + ". Invalid phone num.\n";
        }
/*  This code check the value : If value is empty or value length less than 8 or is not a null then show error Invalid Phone num */         
    if (gEmail == "") {
        errNum++;
        err += errNum + ". Enter Email.\n";
        }
/* If you don't Enter anything in Email field than show error(Enter Email)  */
        else{
        if(!ePat.test(gEmail)){
            errNum++;
            err += errNum + ". Invalid Email.\n";   
            }
        }
          /*  If you don't Enter Email address in ePat format (i already discribe "ePat") than shaw error (Invalid Email)  */

    if (gComm == "") {
        errNum++;
        err += errNum + ". Enter comments.\n";
        }
   /*  If you don't Enter anything in Comment field than show error(Enter Comments) */
        if (!arg.gender[0].checked && !arg.gender[1].checked) {
            errNum++;
            err += errNum + ". Select gender.\n";
        }
  /* If you don't  checked 0 index of gender field  or 1 index than show error(Select gender)*/
        if (!arg.tv.checked&& !arg.radio.checked) {
            errNum++;
            err += errNum + ". Select Reference.\n";
        }
   /*  If you don't  checked tv field and radio field than show error(Select Reference) */
if (arg.course.selectedIndex< 1) {
            errNum++;
            err += errNum + ". Select Course.\n";
        }
  /*  This code check your selection index if your index is less than 1 than show error (Select course) */

        if (errNum>0) {
            alert(err);
            return false;
        }
 /*  IferrNum is greater than 0 than alert error and return "false" */

        else{
            alert('done');
            return true;
        }
        /* If errNum is less than 0 or 0 than alert "done" and return "true"*/
}
main();     
  </script>

Summary
Above explanation will surely help you in understanding Form Validation in JavaScript and HTML. The Form Validation is being used almost in every website. It is very good to create a safe and performance rich website because everything can't be left out for the server as sever sucks. If you want help or advanced Form Validation training then you can join our online JavaScript classes or classroom.