In JQuery we have validation plugin with that i developed a simple form validation may it will use for you.
Live Demo Download Script
Step 1
Add the bellow code in index.php bottom of the <BODY> tag.<script src="jquery-1.10.2.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>
$( "#reg" ).validate({
rules: {
uname: {
required: true
},
password: {
required: true,
minlength:3
},
email: {
required: true,
email:true
},
mobile: {
required: true,
number:true,
maxlength:10
}
}
});
</script>
Step 2
Add the CSS code in index.php inside the <HEAD> tag.<style>
body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#000;}
#register{background-color:#09C; border:solid #666 1px; width:500px; height:auto; margin:0 auto; color:#fff;}
.submit{ background-color:#000; color:#FFF; padding:10px; cursor:pointer;}
input,select{ border-radius:5px; background-color:#F3F3F3; -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px; border:0; padding:5px;}
</style>
Step 3
Add the bellow code in index.php bottom of the <BODY> tag.<div id="register">
<form name="form1" id="reg" method="post" action="">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td width="162"> </td>
<td width="203"> </td>
</tr>
<tr>
<td align="right" valign="top">User Name</td>
<td valign="top">
<input type="text" name="uname" id="uname" placeholder="Username"></td>
</tr>
<tr>
<td align="right" valign="top">Password</td>
<td valign="top"><input type="text" name="password" id="password" placeholder="Password"></td>
</tr>
<tr>
<td align="right" valign="top">Email</td>
<td valign="top"><input type="text" name="email" id="email" placeholder="Email"></td>
</tr>
<tr>
<td align="right" valign="top">Mobile</td>
<td valign="top"><input type="text" name="mobile" id="mobile" placeholder="Mobile"></td>
</tr>
<tr>
<td align="right"> </td>
<td><input name="button" type="submit" class="submit" id="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
Live Demo Download Script
What you have done in this???
ReplyDeleteI mean this well documented on the plugin website. Even in better way that you have explained here...
well .. i just given a sample intro about small intro and how to use the plugin validation .. thank you
Delete