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");
October 22nd, 2009 at 1:59 pm
In my simple form with only your widget, dijit.byId(“myForm”).validate() always return false, but textarea is not empty. What’s wrong?
October 27th, 2009 at 8:56 pm
Thanks for posting this. We used it and made a couple of changes, so I thought I’d post them here for any future users…
Changed to keep the invalid message from appearing when the field doesn’t have focus:
if (arguments.length==0) this.validate(false);
and added this to allow field contents to validate when newlines are present.
regExp: “(.|\\s)*”,
October 27th, 2009 at 9:40 pm
Actually, validate needs to be like this for the form to submit right:
validate: function() {
if (arguments.length==0) {
return this.validate(false);
}
return this.inherited(arguments);
},
This is using dojo 1.3
October 27th, 2009 at 9:56 pm
Brilliant! Thanks ;o)
November 12th, 2009 at 1:12 pm
This solution also works with dijit.form.Textarea, and that’s exactly what I needed. Thank you very much!
February 16th, 2010 at 8:58 am
Very helpful! Thanks!
October 4th, 2010 at 8:36 am
Thanks Random web user .. It works..
October 4th, 2010 at 9:27 am
Warning icon is not displaying .. usually warning icon is displayed when input is wrong.. How to fix this?
December 20th, 2010 at 4:32 pm
I tried to create validation textarea for my site. when I loaded page it says: mixin #0 is not a callable constructor. clsInfo.cls.prototype is undefined I can’t find any information about clsInfo, so I don’t know what is it. maybe the problem that I use dojo from google:
and my own script is located on localhost. so when my dojo on page initializes something goes wrong with my script. I can’t find any good info on dojo, maybe I search in wrong places? please help me to resolve my problem
December 21st, 2010 at 12:26 pm
Its possible second_ffgf.. Though its been a long time since I touched dojo. Also I’m not sure this will work on latest dojo. I moved to use extjs and can’t recommend it enough. Its polished beyond anything else out there.