Aug 7 2009

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.provide("ValidationTextarea");
dojo.require("dijit.form.SimpleTextarea");
dojo.require("dijit.form.ValidationTextBox");

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);
        }
     }
);