dijit ValidationTextBox Custom Validator

The dijit ValidationTextBox widget is an excellent way to help users enter valid data. Recently, I had a very long and complex regular expression that caused performance issues when the data was typed into the input. To improve performance, I used a custom validator (http://docs.dojocampus.org/dijit/form/ValidationTextBox-tricks).

Code

var dijits=Array('sInboundFormat','sOutboundFormat');
var regexps=Array(/^sip:[\w]+@[\w\.]$/,/^sip:[\w]+@[\w\.]$/);
 
dojo.addOnLoad(function()
{
        var i,ld=dijits.length;
        for (i=0;i<ld;i++)
        {
                /* Store the regular expression for the input */
                dijit.byId(dijits[i]).cRegExp=regexps[i];
                /* The bValid flag stores the current state of the input */
                dijit.byId(dijits[i]).bValid=true;
                dijit.byId(dijits[i]).validator=function (value,constraints) {
                        /* Determine where the focus is */
                        var d=dijit.getFocus();
                        /* If the focus is on the save button */
                        if ((d!=null) && (d.node!=null) && (d.node.id=='btnSave'))
                        {
                            if (dojo.trim(this.value)!='')
                            {
                                /* Set the bValid flag */
                                this.bValid=this.cRegExp.test(this.value);
                                /* Update the error icon on the input */
                                if (!this.bValid)
                                        dojo.addClass(this.domNode,'dijitError');
                                else
                                        dojo.removeClass(this.domNode,'dijitError');
                            }
                            else
                                this.bValid=!this.required;
                        }
                        /* Return the input state (valid or not) */
                        return this.bValid;
                };
        }
});

This code adds an attribute to the widget, bValid. bValid is initialized to true, and updated after the input is validated. The performance gain is realized by testing the focus and only running the test if the user has just clicked ‘Save’.

Since the validation is not performed as the data is entered, it’s not a real-time validation, however, the input does include the warning icon after the validation cycle, to help the user quickly find errors.

This post courtesy of Lyrix, Inc. / Mobiso