PHP Tutorial Online: Simple Form Validation Using jQuery

*********************

Form Validation Using jQuery

*******************

*******

***

Here is the Step by Step tutorial for validating contact or any other type of form using simple jQuery.

Step 1: First of all we need a contact form or any other form you want to validate :-

Here is the Code for the simple form using all Character , number , email and Web url s to validate.

It's a Very Simple form Created in Dreamweaver using table just to check the functionality.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


</head>

<body>
<form action="" method="get" id="form1" name="form1">
<table width="60%" border="1" >
<tr>
<th scope="row">First Name</th>
<td><label>
<input type="text" name="txtfname" id="txtfname" class="required" />
</label></td>
</tr>
<tr>
<th scope="row">Middle Name</th>
<td><input type="text" name="txtmname" id="txtmname" class="required"/></td>
</tr>
<tr>
<th scope="row">Last Name</th>
<td><input type="text" name="txtlname" id="txtlname" class="required"/></td>
</tr>
<tr>
<th scope="row">Phone No</th>
<td><input type="text" name="txtphno" id="txtphno" class="required number" /></td>
</tr>
<tr>
<th scope="row">Email</th>
<td><input type="text" name="txtemail" id="txtemail" class="required email"/></td>
</tr>
<tr>
<th scope="row">Age</th>
<td><input type="text" name="txtage" id="txtage" lass="required number"/></td>
</tr>
<tr>
<th scope="row">Address</th>
<td><input type="text" name="txtaddress" id="txtaddress"  /></td>
</tr>
<tr>
<th scope="row">Web Url</th>
<td><input type="text" name="txturl" id="txturl" class="url"/></td>
</tr>
<tr>
<th scope="row"><label>
<input type="submit" name="button" id="button" value="Submit" />
</label></th>
<td>&nbsp;</td>
</tr>
</table>

</form>

</body>
</html>

The table looks like this:

Now All we Need to Include jQuery file in this file at the head Section where usually all the script and style are written. There are lot's of jquery scripts online which you can use. I have one for this task and it's working with my code.

Here is the 2nd step to include jquery Script in the web page:

<script type="text/javascript" src="JQuery/jquery-latest.js" language="javascript"></script>
<script type="text/javascript" language="javascript" src="JQuery/jquery.validate.js"></script>

All what you need to add these line in your head section of form page. You may have different path for these file so you need to define the file path yourself. And the most important thing if you are getting 2 or more then 2 files for the jQuery then please read the instruction about the file sequence that how those files must be added. As in my case I add the query-latest.js after jquery.validate.js then my code will not work.

And now all we need to add java script code after those .js files we already have added.

<script type="text/javascript">
$(document).ready(function()
                       
  {
      $("#form1").validate()
  });


</script>

Now all what you need to do is test if the jQuery is working or not. For that you must add a class to to input tag for which you want to use validation. If the input value is required then then you need to put a class="required" to that input tag.

Like:
if the First Name is required then add class="required" and if the tag is to input a number then class="number" , class="email" and class="url". As jQuery checks for the class and applies the query to that tag's value.

If the tag is required and must be number, email or url etc. Then class will be :
class="required number" , class="required email". Hope you have got the idea.

Note:-
I already have added a class attribute for all the input tag on the form as i don't want to paste all the code again in here in Blog.

Here you can download the jQery files. Form Validation jQuery

PHP Tutorial Online

Pages

Friday, April 20, 2012

Simple Form Validation Using jQuery

6 comments: