Non intrusive usage of Javascript in client-side form validation
When you are developing a website or an application, there will come a moment that you have to start using Javascript to validate your HTML forms. Here you have 4 options. Option one is not to validate. Although tempting, it is not the best option to use. Option two is to depend on your application framework and hope they have implemented client-side validation into it besides the server-side validation. Option three is to custom code some basic validation scripting yourself.
This is a great way to learn more about Javascript, but also the figurative pain in the butt. Option four and final option is to grab a existing Javascript validation framework from the Net and use it. I would recommend option four which brings me to the actual goal of my post
Many Javascript validation frameworks that are available have one thing in common. You MUST code Javascript to use it. And this is just the thing you are trying to avoid. Spry is a nice example here. Very powerful framework, but you have to know about Javascript to use it. Would it not be nice that u can use a Javascript validation framework without having to know Javascript. I know some designers would love it, since they do not have to depend on other developers for the Javascript. On the other side. I as a developer can spend my time on other issues besides validation coding. That mean that I will have more time if I provide my designer with a non intrusive way to implement client-side Javascript validation.
Criteria for Form validation
As you can imagine I have done some coding and a basic framework has been created. I have build a client-side Javascript form validation framework that adheres to the following criteria.- No Javascript coding is necessary for basic validation
- Error messages should be displayed where you want then to
- Language support
- Easy extensibility for custom validation code
Requirements for the Javascript Form Validation framework
Let us start with what we have to add to our HTML page and form in order for this validation framework to work. Only two thing are needed to activate the framework in your HTML form.- Add the Javascript file to your HTML page
- Add validation="true" to your form-tag
Form validation options
Adding validation is just as easy as activating it. You have to add attributes in the input-tags to use validation. Before I show you how to do this I will sum up the validation options you have.- required check
- Zipcode NL check
- E-mail check
- ISO date check
- Masking of Text input fields
- Add custom Javascript checks
How does javascript form validation work?
Well you have to add another attribute into the form-tag and you must add either a div-tag or span-tag(s) which act as container for the messages. For example. You want to display all errors in one place. This is how you have to do it: [code] [/code]and Put a message container in your code like this: [code] [/code] Now your messages will all be displayed at the location of the div. If you want to display the messages locally you must do this: [code] [/code]and provide a span-tag for each input-tag you have validation on: [code][/code] Now the errors corresponding to the naam input field will be displayed in the span naam_error. As you can see the span-id must contain the name of the input field. The framework will use this to find and disply the errors in the correct span.Custom javascript form validation
I am fully aware of the fact that I have not provided a all encompassing validation library. Thus I have provided the means of extension. You can add your own javascript method, which will be used in the validation framework. The only two things you have to do are: Add a attribute to your input-tag for the custom validation [code] "[/code] And build your own Javascript method The method should have the signature below. When your custom validation fails you must return the error message to be displayed. Off course you can use a predefined error available in the validation library. [code] function exampleCustomCheck(message) { if (document.simpleform.naamCustom.value!='') return null; return message; } [/code]Masking in form validation
The last item I want to show of is Masking. I love masking. It gives you a very powerful way of forcing the user to adhere to your desired input. I have implemented 2 types of masking. First there are a set of predefined masking option available. These are:- date_iso
- date_us
- time
- phone
- ssn
- visa