Rough Book

Regula: An annotation-based form-validator written in Javascript

There is one more thing I haven’t gone over. Well, actually, there are quite a few things I haven’t gone over really well, but like I mentioned before… gentle introduction and all . Anyway, so one more thing that I need to go over is a form-specific constraint. These are constraints that apply to a form as a whole. For example, earlier I talked about the @CompletelyFilled constraint that ensures the form is completely filled. You can also create your own form-specific constraints. The way you create them is almost exactly the same as a regular constraint, except for one thing. The validator does not return a boolean. Instead, it must return a list of elements that failed the constraint. For example, assume that I wanted to create a constraint called @PasswordsMatch, which ensures that the passwords entered in the form match. I could do something like this in HTML:

<form id = "myForm" class="regula-validation" data-constraints="@PasswordsMatch">
  Password: <input id="password1" type="password" data-constraints="@NotEmpty" /> <br />
  Re-enter password: <input id="password2" type="password" data-constraints="@NotEmpty" /><br />
</form>

And do the following in Javascript:

regula.custom({
    name: "PasswordsMatch",
    formSpecific: true,
    defaultMessage: "Both your passwords must match!",
    validator: function() {
        var failingElements = [];

        if(document.getElementById("password1").value != document.getElementById("password2").value) {
            failingElements = [document.getElementById("password1"), document.getElementById("password2")];
        }

        return failingElements;
    }
});

As you can see, the validator returns an array of failing elements. If the array is empty, it means that the validation was successful. Notice the formSpecific attribute. This tells the framework that the custom constraint is a form-specific constraint. The validator is smart enough to complain if you attach a form-specific constraint to an input element, or vice-versa.

The above information is out of date. The @PasswordsMatch(field1=”id_of_first_password_field”, field2=”id_of_second_password_field”) is now a built-in constraint in Regula

This should give you basic knowledge about the Regula framework. I haven’t gone into as much detail as I would have liked; I need to write up some comprehensive documentation. If you’d like to play with the framework (and I encourage it!) you can get it from GitHub or download it directly from here.

On another note, I’m aware that using JSF (and things of that nature) it is possible to do client-side validation along with server-side bean-validation. But this is not the case in other languages and stacks (PHP for example). My aim is to provide a simple and powerful form-validation framework. In addition, I want to see if I’m able to work this into JSF, Spring, or Groovy on Grails (a really long-term goal – something I’d like to look at if/when I have time).

I look forward to your comments and suggestions for improvement. Thank you in advance for your feedback!

Update: I’ve made a few changes to the library (you can see the strikeouts and notes in the post). You can get v1.0.0 at GitHub.

Popularity: unranked [?]

Pages: 1 2 3 4

March 30, 2010 - Posted by vivin | Programming and Development, Projects, Web | annotation, annotation-based form-validation, annotation-based validation, annotations, bean-validation, form-validation, framework, hibernate, javascript, javascript form-validation, library, regula