Javascript form-validation framework: Request for Review

Question

I wasn't sure if I could ask this kind of question, but after seeing this on Meta Stackoverflow, it looks like this kind of question is ok. Well, onto my question:

A few months ago I wrote a validation framework in Javascript. I know that there already exist validation frameworks like jQuery Validation, but I wanted to take a different approach to validation. Current approaches deal with writing Javascript code to perform validation on form elements. By looking at the form source code, it is not immediately evident what validation occurs on each element. To some extent this can be remedied by using CSS classes that specify different kinds of validation. But I felt that even this was limited because you cannot easily customize the behavior of the validaton (error messages, etc.). I wanted to do something like annotation-based validation in Java using JSR-303 Bean Validation or Hibernate Validator.

Since HTML5 allows you to add custom attributes to an elements, I figured that I could leverage this to "annotate" form elements for validation. So, essentially, I came up with this:

<input id = "myInput"
       name = "myInput"
       type = "text"
       class = "regula-validation"
       data-constraints = '@NotEmpty @IsNumeric @Between(min=1, max=5)' />

With this basic idea in mind, I created a Javascript framework that:

• Examines the DOM for elements that have constraints defined and binds these constraints to the elements
• Allows the creation of custom constraints
• Allows programmatic binding of constraints
• Validates bound constraints

In addition, the framework has the following features:

• Validation groups, similar to that specified in JSR-303
• Interpolation for error messages

Once I created my framework I tried to get feedback and review for it but I wasn't sure where to go to get feedback and review. I wrote a few blog posts about it and posted it to Digg and Reddit (programming section) without much luck. A few people seemed interested, but I didn't get much more than that.

Recently, at my workplace we've been modernizing a legacy codebase (JSP and servlets) and moving it into Spring MVC. When the conversation of validation came up, I pitched my framework to my senior architect. I did a little integration and proof of concept and they seemed interested and gave me the go-ahead to add it to the project. Till now, I only had my own humble opinion that this would be a helpful way to do validation, so this gave me some confidence that my idea and framework might have some merit. However, I still needed some more participation and framework. After I figured out that Stackoverflow does allow these kinds of questions, I decided to post it on here to get some constructive criticism, comments, and feedback.

So without any more delay, I'd like to introduce Regula. The link I have provided goes to a wiki on GitHub that has all the documentation for the framework. You can download the latest version (v1.1.0) from here.

Looking forward to your comments.

Some extra information that is not immediately relevant

I had toyed with the idea of integrating my framework with Spring, i.e., translating the validation annotations on beans into client-side validation. Recently I was able to get this to work, even with validation groups (although there is no support currently for inheritance relations between the groups on the client side). This way, you simply have to annotate field properties with the validation constraints, and client-side validation-code is automatically generated. However, I am a Spring novice and so my method is probably not that clean. I would like to get some feedback on this as well, so if anyone is interested please let me know. Ideally (and I hope I am not being too pretentious) I would like to contact the Spring folks and see if they are interested in this.

Answer 1

I like it a lot already, it keeps my html clean and the ability to build custom validators is great. One thing I added was a short hand for binding the validation and submit functions, and wrapped it up as a jQuery plugin:

if (jQuery) {
    (function($)
    {
        $.regula = function(formId, callback) 
        {
            regula.bind();

            $("#" + formId).submit(function() 
            {
                var validationResults = regula.validate();

                if (validationResults.length > 0)
                {
                    if (callback)
                        callback(validationResults);

                    return false;
                }

                return true;
            });
        };
    })(jQuery);
}

Infact, I've just blogged about it to as I am that impressed with how clean and easy it is. I'm still going to spend time going through your source, to see how your accomplished it, but its a great start :)

In regards to integrating your framework, I work mostly with ASP.NET MVC, and it would be interesting to see how it translate server-side validation logic into client-side constraints. Something I might look over in the next month or so.