Friday, 23 January 2009

JQuery minimal validation plugin

Hi All,

Tonight I am gonna spread a dummy JQuery plugin:) At first I want to fix that I love jQuery. It's logical, well structured and awesome (like Barney Stinson). One boring night I wanted to create a jquery plugin, just for fun and see how it works. I decided to write a validation plugin. The topmost features of a validation plugins are the follows:
- disable submission until all the fields are fill the requirements
- display some information about the error's cause
- sign somehow the parts of the form are false
- if an item became valid, warning message will disappear (toggling)
And of course, there are several criteria related to different kinds of form elements:
- not empty (required)
- only digits
- email
- min/max value/length
- ... etc

I made the basic features with checking 'required' criteria. This sample for those guys (ladies) who recently started to work with jquery or javascript. I tested it on newest browsers (FF3, O9, IE7, C1), and worked fine on each of them. If you curious about some other criteria implementation or anything, I will happy to help you.

And the stuff... oh yes. It needs a form, like:
<form action="" method="post" id="form1">
<label for="name">Name</label>
<br />
<input type="text" name="name" class="required"/>
<br />
<label for="email">Email</label>
<br />
<input type="text" name="email" class="required" />
<br />
<label for="description">Description</label>
<br />
<textarea class="required" name="description"></textarea>
<br />
<br />
<input type="submit" value="Submit" />
</form>

and needs a style:
.validation {
background: #f55;
padding: 4px;
border: 2px solid #fff;
color: #fdd;
font-size: 10px;
float: right;
}

and finally needs to bind to a form via jquery:
<script type="text/javascript">
$("form#form1").validate();
</script>


That's it. If you want this working sample:
View it - http://www.bison.hu/public/sandbox4/
Download it - http://www.bison.hu/public/sandbox4/jquery_minimal_validation.zip
[after download - don't forget to get jquery####.js and link in the html]

Sleep well

No comments:

Post a Comment