So I guess this will be the finale to my series of posts on dojo.query. I’m using dojo.query to validate data entered into dojo dialogs. In this post, I discussed getting dialog content from an Asp.Net MVC controller method. In the onDownloadEnd function, I do any setup of the dialog that is necessary including something like this:
var onValueChanged =
dojo.hitch(this, this.dialogValueChanged, dialogId);
//gotta be keyup -
//validation is out of sync if you use keydown or keypress
dojo.query('input[type="text"], textarea', dialogId)
.connect('onkeyup', onValueChanged);
dojo.query('select', dialogId)
.connect('onchange', onValueChanged);
dojo.query('.dijit', dialogId).widgets()
.connect('onChange', onValueChanged);
This query’s for input elements in the dialog and connects each element’s appropriate method to the function where I do the validation (dialogValueChanged). Note the use of the widgets method discussed in this post.
Here’s the validation function:
dialogValueChanged: function(dialogId)
{
//check if everything is valid
var valid = dojo.query('[widgetid], [widgetId]', dialogId)
.widgets().every(function(widget)
{
if (widget.isValid)
{
return widget.isValid();
}
//if it is not a widget
//or does not have an isValid method, return true
return true;
});
//enable/ disable the save button based on whether it's valid
var action = (valid) ? 'removeAttr' : 'attr';
dojo.query('.dialogSaveBtn', dialogId)
[action]('disabled', 'disabled');
}
Here we’re querying for widgets and using our previously discussed widgets method to get the actual widgets (not just the dom nodes). Then we use the every method of NodeList to call the isValid method on each widget. The every method will return false if any of the widgets’ isValid methods returned false. Then we use the value returned from every to set our ‘action’ variable and use query again to enable or disable our save button(s) by adding or removing the disabled attribute. Note the use of the removeAttr method we added to NodeList in this post. Note also that this all depends on all the input elements on the dialog being dijit widgets. This mechanism can be easily extended to handle non-dijit elements too.