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!
0 comments