<!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>
<style>
.error{border: 1px dashed #FF0000;}
.error_msg{
color:#F00;
}
.error_field{
border: 1px solid #F00;
}
.heading{font-size:24px; font-weight:bold; width:200px; margin-left:100px; padding:15px; }
.field{width:600px; float:none;margin:65px 0px 0px 350px; font-size:16px;}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="plugin.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
$('#new_form').submit(function()
{
var fields = new Array();
<!--Any confunsion : Read user guide>
fields[0] = new Array('text','name', 'required','alpha');
fields[1] = new Array('password','password','required','minlenght');
fields[2] = new Array('text','email','required','minlenght','email');
fields[3] = new Array('text','phone','required','numeric');
fields[4] = new Array('radio','sex','required');
fields[5] = new Array('select','qualification','required');
fields[6] = new Array('checkbox','term_condition','required');
/////////////// array type check box validation ////////////////
fields[8] = new Array('file','image','required','filetype');
fields[8][3] = new Array('.png','.jpg','.jpeg');
fields[7] = new Array('checkbox_array','hobby[]','required');
var form = new form_validation(fields,'new_form');
form.minlength = 6;
form.error_class ="error_msg"; // it will be append on error div which is defined in style tag
form.error_field_class = 'error_field'; // it will be append ton error field(like input field);
form.auto_error_div_generation = false;
return form.validation();
});
});
</script>
</head>
<body bgcolor="#CCCCCC";>
<form id="new_form" name="new_form" method="post">
<fieldset class="field"><legend class="heading">Registeration Form</legend>
<table width="100%" border="0" cellspacing="0px" cellpadding="5px" align="center" >
<tr>
<td>Name:</td>
<td><input type="text" name="name" id='name'/>
<div id="name_error"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password"/>
<div id="password_error"></div>
</td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" name="email"/>
<div id="email_error"></div>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" id="phone"/> <div id="phone_error"></div></td>
</tr>
<tr>
<td>Sex:</td>
<td> Male<input type="radio" name="sex" value="male"/>
Female <input type="radio" name="sex" value="female"/>
<div id="sex_error"></div>
</td>
</tr>
<tr>
<td>Qulification:</td>
<td><select name="qualification" id="qualification">
<option value="">Select qualification</option>
<option value="M.Sc">M.Sc.</option>
<option value="BSC">BSC</option>
<option value="MCA">MCA</option>
</select>
<div id="qualification_error"></div>
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td><input type="checkbox" name="hobby[]" value="cricket" />Cricket
<input type="checkbox" name="hobby[]" value="hockey" /> Hockey
<input type="checkbox" name="hobby[]" value="badminton" />Badminton
<input type="checkbox" name="hobby[]" value="tennis" />Tennis
<div id="hobby_error"></div>
</td>
</tr>
<tr>
<td>Image:</td>
<td><input type="file" name="image" id="image"/><div id="image_error"></div></td>
</tr>
<tr>
<td> <input type="checkbox" name="term_condition"/> Term and Condition <div id="term_condition_error"></div> </td>
<td><input type="submit" name="submit" value="submit" /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
