Validating textarea elements using Dojo and Dijit.forms
I’ve been looking for a dojo textarea (dijit.form.SimpleTextarea) that supports the same validation as dijit.form.ValidationTextBox but all I could find is other people looking for the same thing.
So I’ve come up with this solution, which works well. Its basically a simple extension of SimpleTextarea, with the ValidationTextBox mixed in before it (its important to make sure ValidationTextBox is used before the SimpleTextarea otherwise this won’t work). I overrode the validate, onFocus and onBlur methods to force the popup of the invalidMessage.
To call this, use:
<textarea name=”field_name” rows=”4″ cols=”80″ dojoType=”ValidationTextarea” required=”true”></textarea>
You can also add other validation attributes you’d normaly use in ValidationTextBox, like regExp to validate based on a regular expression.
The dojo component:
dojo.declare(
"ValidationTextarea",
[dijit.form.ValidationTextBox,dijit.form.SimpleTextarea],
{
invalidMessage: "This field is required",
postCreate: function() {
this.inherited(arguments);
},
validate: function() {
this.inherited(arguments);
if (arguments.length==0) this.validate(true);
},
onFocus: function() {
if (!this.isValid()) {
this.displayMessage(this.getErrorMessage());
}
},
onBlur: function() {
this.validate(false);
}
}
);
dojo.provide("ValidationTextarea");
dojo.require("dijit.form.SimpleTextarea");
dojo.require("dijit.form.ValidationTextBox");