This post illustrates how to use some interesting HTML Form validators to check FORM fields writing only some lines of HTML and JavaScript code. All these proposal are lightweight, cross-browser and simple to use and customize in your web projects in few minutes.
If you have some suggestion about this topic, please leave a comment. Thanks!
1. MooTools FormCheck
FormCheck is a class that allows you to perform different tests on form to validate them before submission. FormCheck is lightweight, shiny and fast, supports skins (using CSS), 10 different languages, and shows errors as tips. It support basic validation (required, alpha, digit, alpanu, lenght, confirm...), regex validation (phone, email, url) and a lot of options that allow you to customize this class to fit exactly as you want.
FormCheck is really simple to implement. In the <head> tag of your page add the folloing lines of code:>
Add a link to MooTools Framework:
<script type="text/javascript" src="mootools.js"></script>
...choose FormCheck language (in this case english):
<script type="text/javascript" src="formcheck/lang/en.js"></script>
...include the FormCheck script:
<script type="text/javascript" src="formcheck/formcheck.js"></script>
... and initialize FormCheck using this code:
<script type="text/javascript">
window.addEvent('domready', function(){
new FormCheck('formular');
});
</script>
window.addEvent('domready', function(){
new FormCheck('formular');
});
</script>
You can use default CSS theme for your form using this code:
<link media="screen" type="text/css" href="formcheck/theme/classic/formcheck.css" rel="stylesheet" />
At this point, create a form in the tag <body> of your page:
<form action="#" method="post" id="formular" class="formular">
<form>
<form>
... and add some fields into the form like these:
<input type="text" name="user" class="validate['required','length[4,20]','alphanum'] text-input" />
How you can see in the previous code, the syntax to use this validator is really simple. You have to add this code into attribute "class" of the input field:
class="validate['required','length[6,16]','alphanum'] text-input" />
...it means: validate this field; this field is required, min lenght is 6 chars and max lenght is 16 chars; this is an alphanumeric field. When an user submit the form, the result is the following:
Simple No? Take a look at the demo.
2. Live Validation
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete. In this example you can see how to match the value contained in two fields.In the <head> tag add a link to the livevalidation script:
<script type="text/javascript" src="livevalidation_standalone.compressed.js"></script>
...create two fields:
<input type="password" id="password" />
<input type="password" id="confirmPassword" />
<input type="password" id="confirmPassword" />
...and than add this script below the second input field:
<script type="text/javascript">
var confirmPassword = new LiveValidation('confirmPassword');
confirmPassword.add(Validate.Confirmation, {match: 'password'});
</script>
var confirmPassword = new LiveValidation('confirmPassword');
confirmPassword.add(Validate.Confirmation, {match: 'password'});
</script>
This is the result if the content in the first field matches the content in the second field:
...and this is the result if the content doesen't match:
Take a look at this page for a full documentation support about LiveValidation.
3. ProtoForm
ProtoForm is an unltra lightweight, unobtrusive cross-browser and very easy to customize form validation + submit with Ajax based on prototype.js framework. It checks required fields and validate Email, Date, Telephone number and Url, send data and shows response with Ajax, highlight the form field on focus and on error.You can implement this script on your page with only some lines of code. In the <head> tag add a link to the Prototype and ProtoForm script:
<script type="text/javascript" src="prorotype.js"></script>
<script type="text/javascript" src="prorotype.js"></script>
<script type="text/javascript" src="prorotype.js"></script>
Then, create a form within a div with ID="box":
<div id="box">
<form action="#" method="post" id="send" class="validate">
</form>
</div>
<form action="#" method="post" id="send" class="validate">
</form>
</div>
At this point add some input field into the form like the following:
<input type="text" id="email_Req_Email" name="email" title="Required! Enter a valid email address!" />
In the propery id I highlighted in bold validation options (_Req, _Email). The ID property of fields you have to validete will be something like: name + _option1 + _option2 +....
The "title" attribute is used to display an error message. For a full documentation about this script take a look at the official page.
That's all. If you have some suggestions add a comment, thanks!
I am 
nice post... I wanna try these validations...
Great post :)
thanx so much Antonio
Validation using jQuery :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Thx for the post !
These are pretty nifty.. I'll be looking into these when I move off of a blogger hosted solution.
Thanks
Good Post, I want show an implemetation with jQuery with multilanguage messages of alerts
http://www.anieto2k.com/2008/06/25/validar-formularios-con-jquery/
Hi Antonio.
Nice post.
I am currenty using livevalidation and it's awesome! =)
Live Validation looks great, thanks for the links :)
Thank you for this information... but no script with JQuery ?? ;o)
you've done nice post... it's certainly great...hopefully it's listed again on delicious.com
Antoni, ProtoForm have a little problem in script declaration.
... src="prototype.js" ...
... src="protoform.js" ...
Hi Antonio!
Great post about validation!
Hugs,
Rodrigo
I like the live validation, but personally i use this the most as it's such a lightweight solution - less thank 2k.
http://www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/
Do you have any experience with Spry validators?
Just bear in mind that client-side validation, while a convenience and a great reducer of server load, is only a supplement to the server-side variety, which is mandatory for security reasons.
Ottimo articolo Antonio, complimenti! LiveValidation è davvero ben fatto e credo proprio che lo utilizzerò nel mio prossimo progetto.
These are very simple, easy to use and helpful... Thank you, you always great posts!
http://www.waltdesign.com/software-tools/Form-Validator/
Checks for many different types of validation needs word/letter count, phone numbers, SSN, etc. I'm working on converting it to a jQuery style plug in, but right now it doesn't require any external frameworks, and has customizable look and feel via CSS.
Nice compilation
I think the real challenge is making sure that server-side and client-side validation is in sync. Stuart Langridge has a solution in his Sitepoint book, "DHTML Utopia." He has some PHP code that stores a list of regular expressions for each field in the server code. The server code then writes these expressions into the JavaScript section of the generated page.
Has anyone found other solutions?
Those do look like some nifty validation tools, but don't let their ease tempt you to overuse them. I've been doing something of a pseudo-series on my blog about not requiring or validating any more than is truly necessary and, if you must validate, be absolutely sure that you're doing it correctly. (Will your phone number validator accept the number 353 1 436 9111? Unless you're intentionally limiting your site to US/Canada-only, it should - that's PayPal's EU support number, located in Ireland.)
Also, to reiterate an earlier comment, no matter how much client-side validation you do, it does not eliminate, or even reduce, the need for server-side validation. If I visit your site, the Firefox No-Script plugin will be blocking all active content on your page until and unless I choose to allow each piece to run, which kills your client-side validation dead. Even if you came up with a way to prevent my browser from submitting the form without running the client-side validation first, it's trivial to send a form submission manually with no browser involved. Client-side software can never be trusted.
Client side validation should really be called "fast suggestions for users"!
I like the idea of a client-side validator that takes its values from the server validation code. Anyone got any pointers to such a thing?
~Matt
I use TinyMCE. Great editor. It has a feature that automatically filters MS Word formating on Paste. This Feature only works in IE but all of our users are on IE.
Thanks for the info
Thank you for the post. I have used Proto Form but, how can I make the form send the info to an email?
nice post thanks soo much