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.

Answer 1

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.