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).
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
Print article | This entry was posted by elvis on 09/20/10 at 03:11:04 pm . Follow any responses to this post through RSS 2.0. |