Form Validation in JavaScript

Form Validation in JavaScript

ADMEC MULTIMEDIA Leader in Animation & Digital Media Education ISO 9001:2008 CERTIFIED | ADOBE Testing Center www.admecindia.co.in

Hi, I am Abhishek Ranjan a web designer working in a company in Delhi and studying UI development and Responsive Website designing in ADMEC Multimedia Institute 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:- If 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

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

2. Client-side : 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 instant ly 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 input box, 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 am using these methods, 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 lesssecure than 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: Now 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.

ADMEC MULTIMEDIA Leader in Animation & Digital Media Education ISO 9001:2008 CERTIFIED | ADOBE Testing Center

ADMEC MULTIMEDIA INSTITUTE For More information you can visit :

http://www.admecindia.co.in OR http://www.admecindia.co.in/blog/easy-tutorial-html-form-validation-using-javascript

Contact Us: ADMEC MULTIMEDIA INSTITUTE C-7/114, IInd Floor, Sector- 7, Rohini, Delhi- 85 Landmark: Near Rohini East Metro Station Helpline 1: +91 9811 818 122 Helpline 2: +91 9911 782 350