JavaScript Form Validation


JavaScript Form Validation

JavaScript Form Validation

 Without Validation of the Form we Can not get the Actual Data From User

Which we want for our Application Form or Account. User May Enter String

Value in the Place of the integer Value or may Enter a wrong User name or

password. so It is necessary to Validate a Form. Here , is the Simple 

 Example To Validate a Form Using a JavaScript.

Form Constraints:

 Here , I Put Some of the Constraints to Validate a Form. Like

Login Name : it Contains alphabets, number , .(dot), _ (underscore)

Password : Password Length is 6 to 15

Comments : Optional

Age : Must be integer

Email-Id : Valid Email-ID

Contact No. : 10 digits Contact number ( no need to give the area or

country code)

validate Email-Id

 To Validate a Email-id is the Important point while Validate a Form. so here ,

We will discuss how to validate a email-ID.

Email-ID Constraints

In The below HTML Program, I Supposed a Some Email-ID

Constraints Which are given under the Following points:

1. Email-ID Should not be Start with . (dot or Comma).

2. it Should Contains a Valid domain name (Like .com, .co.in, .net, .org etc)

3. Digits (0-9)

4. Alphabets (upper case and lower case)

Example of the Validate Email-ID

abc@xyz.com

deepak@gmail.com

abc.xy@num.co.net

javaScript function

 Here, is the JavaScript Function To Validate the Email-Id



function ValidEmail()
{
var emailid=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var email=document.getElementById("emailid").value;
if(!emailid.test(email))
alert("Enter correct email-id");
else
alert("Your Email-ID is Correct");
}


Source Code

 formValidation.html File

 HTML Source Code to Design a Application Form.



<html>
<head>
<title> Form Validation </title>
<script type="text/javascript" src="form.js">
</script>
</head>
<form name="form1" onsubmit="validation()">
<table border="2" bgcolor="PINK" align="center" height="600" width="400" cellspacing="5" cellpadding="5">
<caption><font color="red" size="5" style="times new roman">Application Form Validation</font></caption>
<tr><td>
<b>Login Name :</b> <input type="text" name="Loginname" id="ln">
</td></tr>
<tr><td>
<b>Password :</b> <input type="Password" name="Password" id="pw">
</td></tr>
<tr><td>
<b>Gender :</b> <input type="radio" name="r1" checked="yes"> Male
<input type="radio" name="r1"> Female
</td></tr>
<tr><td>
<b>Profession :</b>
<select name="profession">
<option name="goverment">Goverment Employee
<option name="doctor">Doctor
<option name="engineer">Engineer
<option name="teacher">Teacher
<option name="ownbusiness">Own Business
<option name="student">Student
</select>
</td></tr>

<tr><td>
<b>COMMENTS :</b><br>
<textarea name="comment" value="enter your comment"
col=20 rows=4></textarea>
</td></tr>

<tr><td>
<b> Age : </b>
<input type="number" name="age" id="ag">
</td></tr>

<tr><td>
<b> Email-Id : </b>
<input type="text" name="email-id" id="emailid">
</td></tr>

<tr><td>
<b> Contact No. : </b>
<input type="number" name="contactnumber" id="cn">
</td></tr>

<tr><td>
<input type="submit" >&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset">
</td></tr>

</table>
</form>
</html>

form.js File

 JavaScript Code To Validate the Application Form, Whether User Enter

a Correct data types According our Requirement or not.


function validation()
{
var count=0;
var pass=document.getElementById("pw").value;
if(pass.length < 6 || pass.length > 15)
{
count++;
alert("Enter The Correct Password Length between  6 to 15");
}
var contact=document.getElementById("cn").value;
if(contact.length !=10)
{
count++;
alert("Enter The Valid Contact Number of the 10 Digits");
}
var emailid=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var email=document.getElementById("emailid").value;
if(!emailid.test(email))
{
count++;
alert("Enter correct email-id");
}
var name=/^[a-zA-Z0-9._]*$/ ;
var str=document.getElementById("ln").value;
if(!name.test(str))
{
count++;
alert("User Name not Valid");
}
if(count==0)
alert("Your Application Form is Successfully Submitted..!!!")
}

 Now, 
Step-1. You Copy The formValidation.html file, Paste in Notepad or

Other Id's and Save it as .html FIle.

 Step-2. Similarly, You Copy The form.js file, Paste in Notepad or

Other Id's and Save it as .html FIle in the same folder where you save

your .html file.

 Step-3. Now, Open the formValidation.html file in any Web browser

and Check The Application Form.

Thank You To All My Reader
Deepak Gupta
www.i-world-tech.blogspot.in

Related Post

1. Mini Project in C : Book Shop Inventory System

2. Interesting C++ Program




5. How To Add Music File To Website

6. How To Add Meta Tags To Blogger

7. SEO Tutorial : Beginner

8. JavaScript Math Object

9. How We Enable JavaScript in Browser

10. Batch Programming :How To make a Simple Calculator in Batch programming
Location: New Delhi, Delhi, India

Comments

Post a Comment