This is an old video; I just found it. I uploaded it to YouTube since you can’t view it on the original DVIDS site. When I was in Iraq our unit commander’s (CPT Callaway) mother sent a bunch of toys over to us. We took these toys and handed them out to Iraqi kids.

Download ShapeWriter APK

Bear in mind that the pictures are somewhat large and take a little while to load (around 10 seconds unfortunately; my upstream speed is crap).

[View with PicLens]

Comments are appreciated

:%s/^\s\+$//

Note: I used a blockquote here because WordPress doesn’t like two forward slashes in the sourcecode tag.

Then, you have to do this:

:%!grep -v  "^$"

Of course, this only works in Linux, BSD, or any of the other Unices.

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

That bit of code describes a text box which cannot be empty, and which expects a numeric value between 1 and 5. With this basic design in mind, I started working on my framework. It took me about a week of on-and-off work (maybe 3 days actual work) but I’ve come up with something that is, in my humble opinion, a flexible and easy to use framework. I plan to document the use of this library/framework more thoroughly, but this post should serve as a gentle introduction to the framework and its features.

In Regula (which, by the way, means “rule” in Latin) form elements (input elements or even the form elements) can have constraints attached to them in a similar fashion to the example I described earlier. There is a small difference, however:

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

As you can see, I use a class name of regula-validation which tells the framework that this input element has constraints attached to it. The reason I did this was for efficiency reasons. It’s much more efficient to grab all elements that have a class name of regula-validation than walking the whole document tree to search for nodes that have a data-constraints attribute.

After you annotate the input elements with their constraints, you’re halfway there already! All you have to do after that is add a script tag for the framework:

  <script type = "text/javascript" src="regula.js"></script>

And then add the necessary Javascript to validate the form (example uses jQuery):

jQuery(document).ready(function() {
    // must call this first. The best place would be in an
    // onload handler. This function looks for elements with
    // a class name of "regula-validation" and binds the
    // appropriate constraints to the elements
    regula.bind(); 

    jQuery("#myForm").submit(function() {
        // this functions performs the actual validation
        var validationResults = regula.validate();

        for(var index in validationResults) {
             var validationResult = validationResults[index];
             alert(validationResult.message);
        }
    });
});

That’s pretty much all there is to it. More advanced uses of the framework don’t deviate that much from this pattern. Compared to other form-validation frameworks (that I’ve seen), validation will not stop on the first failing element. The validate function runs through every input element and validates it against the constraints bound to that element, and returns an array of “validation results”. Each “validation result” element in the array has the following properties:

• constraintName – the name of the failing constraint
• custom – a flag that says whether this is a custom constraint or not
• constraintParameters – An array of objects that represents the parameters passed to this constraint (defined in the HTML. For example @Max(max=5), where you have a parameter who’s name is max and who’s value is 5. There’s a little more to this, but like I said, this is supposed to be a gentle introduction )
• receivedParameters – A hash (organized such that the name of the parameter is the key, and the value is well, the value) of parameters that the validator function received (helpful when you have a custom validator).
• failingElements – An array containing references to the actual input element or elements (in the case of form-specific constraints) that failed the constraint.
• message – The error message.