it is a really easy and fast way to validate your forms and if you spend a little time on the css side of this you can get a rally good looking validation here is the link
DADA THE LINK
ill show you a quick example they show this on their website so look there for more help or SEND ME AN EMAIL :D
here i go
aim i want to make simple validation that validates stuff
here is the code for the form page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>now you include the jquery and the jquery validation file
you make your form how you want
now this is simple on each text box you add a class eg
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
now i have hightlighed in red the class now that is what tells jquery what you are validating!
so that example above will make it so the users has to enter a value and has to be in email format
tell you what ill show you another example
this time i am validating name
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
now look at the class this time it just say required that mean you just have to put a value in eg j
now there is not many people this a name of 1 letter so now we add minlenght text in green that tells jquery that the value enter has to be more than 2 letter easy hay!
so what are you waiting for just go to the site and read about
the plug in does many things like number email same value as the other text box and so on.
the message that are being show if the user does something wrong can also be altered i found the easy way of doing that with out writing any more code is to go into the plug-in file and do a search and find on the word number or minlength and soon it will take you to the part in the code where you can alter the message being displayed
and before i go you can also add css to sytle the way the message look
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>as you can see what that does us the error message come up red with a chosen font etc
by the way all you have to do is activate the jquery to work on the form with this small code
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>where it say #commentForm change that to you form name REMEMBER to keep the # so if my form name was hello i would change it too #hello
cool hope this helps you
:D
No comments:
Post a Comment
i do all this for free so PLEASE NOT SPAM thanks