Quick & Easy Web Form Checks with Live Validation
Ever wanted to have super spiffy, quick and easy web form checking, web 2.0 style with AJAX? Well now, with Live Validation, you can set up form validation in 3 quick and VERY simple steps. Here is how …
Where to Begin with Form Validation
For starters you need to have the form created in your XHTML/CSS based page. Assuming this and presuming that each form element has its own valid and unique ID, you are set to go with Live Validation. To start you need to include the latest version of Live Validation as a JS script or file in page. In your <HEAD></HEAD> somewhere put the file link as follows:
<script language="JavaScript" type="text/javascript" src="js/livevalidation_standalone.compressed.js"></script>
Now that you have included the main JS file, you need to create a tiny scripet for each form item in turn. The available web form checks that Live Validation provides include:
- Presence - Whether anything has been entered into the input field
- Format - If the input matches a specfic regular expression (regex)
- Numericality - Whether the input is numeric or not
- Length - If the item matches a specific string length
- Inclusion - Whether or not the entry matches 1 of a list of options
- Exclusion - Whether or not the entry does NOT match 1 of a list of options
- Acceptance - If the form filler has checked a box or not
- Confirmation - Whether or not one field matches another
- Email - email format checking in 1 easy step
- Composite validations (combining validations) - Combine more than 1 validation routine to a single form input element
Setting Up a Validation Routine
So now that you have the form, with IDs and you have the JS script included in your HTML. You can create your checks. The following example is for an easy email validation (the code includes the input eement for reference)
<input name="email" id="email" type="text" size="40" />
<script type="text/javascript">
var email = new LiveValidation('email');
email.add(Validate.Email);
</script>
Validating That 2 Inputs Match On The Form
Now given that you are checking that the email is valid in format, maybe you want to check that the email is in fact correct, as users do have a propensity to miss-type soemtimes! Do thing this is equally simple.
<input name="emailConfirm" id="emailConfirm" type="text" size="40" />
<script type="text/javascript">
var email = new LiveValidation('email');
emailConfirm.add( Validate.Confirmation, { match: 'email' } );
</script>
Creating Multiple Validation Routines
The previous 2 examples are simple and involve just the validation of a single input and then matching the second input with the first, but what if you want to perform multiple validations on a single form input element? Well that is also easy, this is how:
<input name="emailConfirm" id="emailConfirm" type="text" size="40" />
<script type="text/javascript">
var emailConfirm = new LiveValidation('emailConfirm');
emailConfirm.add( Validate.Email );
emailConfirm.add( Validate.Confirmation, { match: 'email' } );
</script>
And with that you can add as many or as few forms of validation check as you need.
Styling it All Up
Okay, so we have the code set up, and you may or may not have seen how exactly Live Validation works and how it displays the requisite error or validation. As the name implies, the validation is live and so are the messages tot he end user. Once the user has clicked into the input element (i.e. onFocus) the JS wil start validating and produce both an error message, and a red border around the input element (where relevant). Having completed the entry the JS will display the opposite, a green confirmation and border, unless of course the data entry is incorrect! With the way Live Validation has been coded there are some very simple classes that can be used in your CSS to restyle the way that Live Validation actually displays its confirmation and error messages. These are as follows:
.LV_validation_message{
font-weight:bold;
margin:0 0 0 5px;
}
.LV_valid {
color:#00CC00;
}
.LV_invalid {
color:#CC0000;
}
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active,
textarea.LV_valid_field:hover, textarea.LV_valid_field:active {
border: 1px solid #00CC00;
}
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active {
border: 1px solid #CC0000;
}
As you can see from the above CSS code, there are only 5 paramenters required to make the most basic amendments to the way the vsuals works. The great thing about this is that you can do anything you like, including turn the red and green text into red exclamation and green tick images for better visual representation rather than long unweildy text, that may or may not fit in with your overall design.
Form Submission and Handling
And so, now that the form is setup and style, you just need to consider the scenario once the form SUBMIT button is hit. If you want to stop the end user submitting the form with invalid data you can tie further checks to the form, which will then stop them and force them to make sure all data is valid before proceeding. In my experience this is the option that makes the most sense. End users , even when submitting sales and payroll data, can be exceedingly sloppy. To create overall form validation, you need to add a second paramater to your scriptlets. Below is the initial example of this article repurposed for overall form validation:
<script>
var email = new LiveValidation( 'email', {onlyOnSubmit: true } );
email.add( Validate.Email );
</script>
Conclusion: Easy Way Forward & Great Anti-Spam!
Live Validation is a great little addition to the web developer’s toolkit. It not only helps ensure that valid data is submitted on your forms, but it also adds to the ability to cut down on SPAM from mailer forms. Live Validation is so easy to inplement, and so small (10kb optimized) that everybody should be using it! The only downside I can see in the overall scheme of things is that it has no in-built functions for making web requests that can then allow a developer to perform validation against a database or other source, but that aside it goes a long way to actually improving things in terms of form submission and with the ability to use regular expressions, ths tool is exceedingly powerful. To find out more visit: http://www.livevalidation.com/
