A little history...
This validador was born as a result of a work where I had to validate many elements of the form (at least 240 fields divided in 5 groups of 60 fields), I searched a flexible script for a such task, I found some but these didn't satisfy what really it needed, taking into account the time to understand and adapt them, I decided to implement it.
During the development of script I learned many things, thanks to the continuous visits to related pages and forums and I even tried to report a Firefox bug (that wasn't a bug, just a lack of concepts). In gratefulness to that, I share the code of this validador and I'm almost sure that it will save you some development time. I recognize that it has many limitations and/or errors that I hope, we can solve it...
Features
- It allows the validation of text fields, text area, lists
- It allows the use of customized functions
- It allows to add to events to elements using regular expressions (when it is wanted to limit the input of certain characters, in this version it doesn't accesible)
- Different ways to show errors
- It allows to make debugging
- Object Oriented
- Compatible with IE and Mozilla Firefox
Details
The validador is implemented using the OO model so that it can be used in different HTML forms at the same page. Script takes the elements that have the attribute title assigned, the content of this attribute is showed if the validation process fails. In order to use this validator, it's enough to create an instance and to setup some properties
<script type="text/javascript">
val1 = getInstance('foo');
val1.showSummary = true; // Poniendo esto en false, es un poco molesto
val1.showMessageBox = true;
val1.cssOn = true;
val1.summaryId = 'summary';
</script>
As you can see, we get an instance through the function getInstance, next setup some properties like: showSummary, showMessageBox, CssOn and summaryId (and so for), the first attribute means that error messages will be within a unordered list; the second, using an alert message; the third, enabling the use of CSS classes and the last is to define the container where the errors will be showed. For more details I will publish within the next days a list of properties and functions, meanwhile you can see the source code 🙂
One of the things in which I want to refine the work is the use of customized functions, so these can be integrated with the validador, in this release appears a basic version of this functionality using following syntax "val1.addCustomFunction('email', 'checkEmail');", where the checkEmail function, receives as a parameter (this release only allows one parameter: is the value of the control associated to the function) one string that is associated to the element to validate, this function returns "true" or "false"
For greater details with the use I send to the reader to download the example or to see the operation of this one in the test page .
Conclusions
The validation in the client side is important, it can save innecesary postbacks to validate our data, but we can't ensure that it always will be enabled the client side scripting, for that reason it's also necessary to make data validation on the server side, to avoid incoherences....
Don't forget to rate this script 😉