Form validation is an important part of most websites and more specifically client side validation is an important contribution to the the user experience.
In the brave new world of "Web 2.0" we have access to tools like JQuery to help developers to do this sort of jazz with AJAX and the like. This however (regardless of how straight forward it actually is) is still scary and complicated for anyone not already familiar with JavaScript.
The code I want to talk about here is of my own creation. I'll be the first to admit that "I am not a developer", and so the code itself may not be technically perfect, for this I make little apologies.
What I set out to do is create a reusable code class; a class which can be reused to validate any form without modification or an excess of additional javascript. I also took the opportunity to tinker with 'prototyping' to take a true object orientated approach to the code; this makes it fast and hopefully easy to follow.
In reality the minimum code requirements for any page containing a form would look a little bit like this:
Take notice of the lack of any reference to HTML object names or ids, the code is entirely generic, all we are doing is instantiating the class.
The types of validation for form elements themselves are set within the form elements tag with the simple addition of some attributes such as
validate, valmand, valmin, valmax etc.
Any number of compatible commands can be used in combination, e.g. a text field which is mandatory and has a minimum and maximum character length could be defined as such:
The consequence of this should be obvious but do note the lack of any scripting or complex syntax.
I've prepared a demonstration form displaying some of the key features. The javascript itself is also available for download, and contains more extensive details on the classes use.
Feel free to play.
In the brave new world of "Web 2.0" we have access to tools like JQuery to help developers to do this sort of jazz with AJAX and the like. This however (regardless of how straight forward it actually is) is still scary and complicated for anyone not already familiar with JavaScript.
The code I want to talk about here is of my own creation. I'll be the first to admit that "I am not a developer", and so the code itself may not be technically perfect, for this I make little apologies.
What I set out to do is create a reusable code class; a class which can be reused to validate any form without modification or an excess of additional javascript. I also took the opportunity to tinker with 'prototyping' to take a true object orientated approach to the code; this makes it fast and hopefully easy to follow.
In reality the minimum code requirements for any page containing a form would look a little bit like this:
<script type="text/javascript">
var myValidator = new ValidatorClass();
function submitForm() {
myValidator.checkForm();
}
</script>
Take notice of the lack of any reference to HTML object names or ids, the code is entirely generic, all we are doing is instantiating the class.
The types of validation for form elements themselves are set within the form elements tag with the simple addition of some attributes such as
validate, valmand, valmin, valmax etc.
Any number of compatible commands can be used in combination, e.g. a text field which is mandatory and has a minimum and maximum character length could be defined as such:
<input type=text validate valmin=5 valmax=15>
The consequence of this should be obvious but do note the lack of any scripting or complex syntax.
I've prepared a demonstration form displaying some of the key features. The javascript itself is also available for download, and contains more extensive details on the classes use.
Feel free to play.
Comments
Post a Comment