Dojo validation of a textarea

Question

I'm attempting to use dojo for the first time, so this may be be obvious.

I have a very simple form with one textarea in it that needs to be filled in.

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<form id='form1' action="" method="" dojoType="dijit.form.Form">
  <label for="dob">desc:</label>
  <textarea class='multilinecontrol' dojoType="dijit.form.Textarea" selected='true' required='true'></textarea>
  <button type='submit' id="next" name="next" dojoType="dijit.form.Button">
    Next</button>
</form>

I've added the 'required' property, so i can ensure the form is valid before the user can proceed.

However when the form is show the textarea has a red focus ring around it, None of the other widgets behave like this and its really annoying.

Any idea how to get rid of it?

I could hack it by putting some kind of default text in like 'Put stuff here' but then I have to do extra validation work - which I presently can't work out how to do.

Solution

Instead of copying the whole existing classes, it's enough to use mixin:

define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {

  return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
    constructor: function(params){
      this.constraints = {};
      this.baseClass += ' dijitValidationTextArea';
    },    
    templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-       point='focusNode,containerNode,textbox' autocomplete='off'></textarea>",
    validator: function(value, constraints) {
      return (new RegExp("^(?:" + this._computeRegexp(constraints) + ")"+(this.required?"":"?")+"$",["m"])).test(value) &&
        (!this.required || !this._isEmpty(value)) &&
        (this._isEmpty(value) || this.parse(value, constraints) !== undefined); // Boolean
    }
    })
  })

Unfortunatelly, I wasn't able to get exactly the same behaviour with red exclamation sign as with validating input - because of Textarea resizing factility, so I've done the CSS trick:

.dijitValidationTextAreaError, .dijitValidationTextAreaError.dijitTextBoxHover {
 background-image: url("error.png");
 background-position: right;
 background-repeat: no-repeat;
}

The error.png needs to be copied from claro theme to your css location. It is displayed inside the text area, not outside it, but it's the only, quite minor difference.

Comments

[noobsharp]

did you find a way to get the typical error behaviour (red text under the text area) instead of the hover tooltip?