Question

I am trying to create a custom ValidationTextBox widget for an email address. We have many areas in our system where we use an email address input and I want to create one widget that has the default regex, invalid messages, etc. The problem is there are two attributes: placeholder and maxlength that do not seem to be getting added to my extended class. My code is as follows:

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

    return lang.mixin(ValidationTextBox, {
    invalidMessage: "Please enter a valid email address.",
    missingMessage: "Please enter a valid email address.",
    regExp : "[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$",
    maxlength : 50,
    placeholder : 'Your Email'
    });
});

If I use this on my page, the invalid messages work fine, but anywhere I use this, I do not see a placeholder, nor is a maxlength applied. In addition to the lang.mixin approach, I’ve also tried using the declare approach spelled out here: http://www.sitepen.com/blog/2010/07/01/creating-and-enhancing-dojo-classes/. I get the same result.

Any idea what I’m missing?

Answer 1

See both options you described in action at http://jsfiddle.net/phusick/eLkwb/

Use dojo/_base/lang::extend instead of mixin:

lang.extend(ValidationTextBox, {
    invalidMessage: "Please enter a valid email address.",
    missingMessage: "Please enter a valid email address.",
    pattern: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$",
    required: true,
    maxLength: 3,
    placeHolder : 'Your Email'
});

Also please note:

• regExp is deprecated, use pattern instead
• attributes are case sensitive: so placeHolder, maxLength
• make sure to dojo/parser::parse() after the extension took place (for markup instantiation)
• maxLength does not work for some reason (see declare workaround below)

Accomplishing the same via subclassing:

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

    return declare([ValidationTextBox], {
        postCreate: function() {
            // a workaround to make maxLength working
            this.inherited(arguments);            
            this.set("maxLength", this.maxLength);
        },            
        invalidMessage: "Please enter a valid email address.",
        missingMessage: "Please enter a valid email address.",
        pattern: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$",
        required: true,
        maxLength: 3,
        placeHolder : 'Your Email'
    });
});