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


14 Responses to “Validating textarea elements using Dojo and Dijit.forms”

  • Abe Says:

    In my simple form with only your widget, dijit.byId(“myForm”).validate() always return false, but textarea is not empty. What’s wrong?

  • Random web user Says:

    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)*”,

  • Random web user Says:

    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

  • harel Says:

    Brilliant! Thanks ;o)

  • Juan Says:

    This solution also works with dijit.form.Textarea, and that’s exactly what I needed. Thank you very much!

  • DeDu Says:

    Very helpful! Thanks!

  • Mr.Nobody Says:

    Thanks Random web user .. It works..

  • Mr.Nobody Says:

    Warning icon is not displaying .. usually warning icon is displayed when input is wrong.. How to fix this?

  • second_ffgf Says:

    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

  • harel Says:

    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.

  • Sree Pothireddy Says:

    This is very helpful. Final version looks something like this.

    dojo.declare(“ValidationTextarea”,
    [dijit.form.ValidationTextBox,dijit.form.SimpleTextarea],
    {
    invalidMessage: “Invalid Input”,

    regExp: “(.|\\s)*”,

    postCreate: function() {
    this.inherited(arguments);
    },

    validate: function() {
    if (arguments.length==0) {
    return this.validate(false);
    }
    return this.inherited(arguments);
    },

    onFocus: function() {
    if (!this.isValid()) {
    this.displayMessage(this.getErrorMessage());
    }
    },

    onBlur: function() {
    this.validate(false);
    }
    }
    );

  • Sanket Pipariya Says:

    It also works for me… thanks a lot

  • sandy Says:

    can u please update it for dojo 1.8 version plz

  • Clint Says:

    Worked great, thanks for the easy fix!

Leave a Reply