Yet Another Validation Plugin… Again!

Well this is the first widget wrote by me from scratch that will include in my End of studies project Astrea. This is a simply widget but a really useful one. 
Validate forms is a very common task, and is usually performed either writing custom functions for each field like is suggested in this page http://www.w3schools.com/js/js_form_validation.asp., which could be considered "the old school way". Another approach is to use a plugin that involves the writing of few lines of javascript to perform the validation, wiring each field with the type of validation that will perform and with the error message that is going to be used. Like in the case of this jQuery Validation Plugin http://jquery.bassistance.de/validate/demo/marketo/. and Another plugins try to improve the way validation is done, like this one http://www.devx.com/webdev/Article/31695
While they do a great job validating the fields, which is what you expect from a validation library in the first place :), it is not always customizable enough. There are situations when you may want the validators look differently or be in a completely different position in the form layout. Other times, you don't want to use the form to send the data directly maybe you just want to extract the value fields as a JSON Object and send that object to the server using Ajax, etc.
Well This is Yet Another Validation Plugin. It is not perfect but include a bunch of features that I found useful in all the time I'm doing web development.

 

Features

1. It is completely customizable with CSS, and since is manually located in the form layout, it could appears in any position. And the error messages can contain whatever you need from plain text to html.
   
2. It is unobstructive, and somehow aspect oriented. The behavior of the validators is set using data-* properties
   
3. It is possible to add new validators and they will work fine (In the case of dynamic forms)
   
4. It is simply to use, and I tend to believe that can be easily extended to add support to new type of validators.
   
5. It is not restricted to validate one single field. Several fields can be validated at once.
   
6. It is possible to validate just a subset of the validators, or even just validate one. I plan to support validate outside the main container
   
7. It is not only restricted to validate actual forms, any container (a div i.e.) can be used as the container for the validation.
   
8. It support asynchronous validation, so actually it is easy to perform Ajax validation with this approach
   
9. Each field is also validated on blur, change, while the user is interacting with the field.
   
10. can validate any type of fields, radios, checkboxes, etc.
    
11. Out of the box this plugin supports the following validation types: required, compare, range, regex and custom. Using the regex and custom validators it is possible to perform almost any kind of validation.

Example of Validator Widget

Go ahead to the result tab to see in action and use the html tab to see the required html, javascript and css
You can find the code here in the Astrea repo. under the examples folder.
To know how to use it take a look to the source code in the example above, I will include a brief documentation later.
The widget is implemented using the widget factory from jQuery UI. So I guess this is actually good news if you're already including this library.
The widget is still work in progress, so there are probably bugs and other stuff. But for a first release I guess it is good enough.
If you have developed in ASP.NET you can find this validator plugin somehow similar to the ASP.NET validator component. That is intentional. I had to work on a PHP project after 4 years of been developing with ASP.NET and missed the validators, and like a lot of us, well I just like to reinvent the wheel and still this can be used for my End of Studies Project. (Yes I know that I ended the University 4 years ago, But I guess it is better late than never)

 

know Issues.

• To support async validation, the custom validators receive a callback function as part of the arguments. It's up to the programmer to call it with the right validation value. An example of async validation will be included later.
  
• If more than one validator is assigned to the same field, if the first fail and the second succeed the failed class gets removed so the visual hint to denote that a field has failed the validation is lost. This will be fixed soon.

 

Short FAQ

Licensing?

While this validator widget has been made for my own consumption, I guess that everybody can use it freely and improve it if is required. The source code is on Github under the Astrea project (Astrea is the name of the Library that I'm looking to finish as my End Of Studies Project). The Project will be released under the LGPL and MIT licenses. So Feel free to use it.

Can't find the documentation?

That's my fault, I haven't enough time to write a proper documentation for this widget yet. I promise I will include one soon. For now you can see how it works live in the code example above.

Can't find the unit tests?

My fault again, this project is just starting and I will love to include unit tests for all the widgets that I will include as part of this Library. So Unit testing using QUnit will be added in the future.

Why not use the HTML5 validators?

Well actually I believe is a good idea to use HTML5 Validators, but the problem with this, is that is not supported by all browsers at this point. I will keep a close eye to how the HTML5 validators evolve and will update this library accordingly.

Validators seems to not been working on Browser XX.XX?

This first release has only been tested in later versions of Mozilla Firefox and Chrome by now. I haven't had time to test it thoroughly in all browsers. So it is possible some issues could appear.