CODEWITHSUNDEEP
javascriptvalidationextjs
Sem Abraham
Sem Abraham

Reputation: 151

ExtJS custom validator colorpicker

I have the colorpicker in ExtJS that I'm using to select colors as backgrounds. However I want the user to be able to put in their own HEX codes. To make sure they don't put invalid HEX codes into the field, I wanted to validate that they had the right amount of characters.

The user is also able to input name colors like: black, red, metalbrightblue.

The SenchaDocumentation on validators was.. Less than helpful.

validator: function (val) {
    // remove non-numeric characters
    var tn = val.replace(/[^0-9]/g,''),
        errMsg = "Must be a 10 digit telephone number";
    // if the numeric value is not 10 digits return an error message
    return (tn.length === 10) ? true : errMsg;
}

As soon as I try to use the custom validator my colorpicker just dissapears. Can someone show me a more comprehensive guide to using validators? Thanks.

EDIT

My extended .js file on the Selector source code from ExtJS

Ext.define('name.name.colorpick.Selector', {
extend: 'Ext.ux.colorpick.Selector',
xtype: 'xtype-xtype-colorpick-selector',

editable:false,

getSliderAndAField: function() {
    return [];
},

getMapAndHexRGBFields: function(){
    var me = this;
    var result = this.callParent(arguments);
    var hexField = result.items[1].items[0];
    hexField.disabled = true;
    hexField.listeners = {
        change: function(field,value){
            me.setValue(value);
        }
    };

    return result;
},

getSliderAndHField: function (){
    var me = this;
    var result = this.callParent(arguments);
    var hField = result.items[1];
    hField.disabled = true;

    return result;
},

getSliderAndSField: function (){
    var me = this;
    var result = this.callParent(arguments);
    var sField = result.items[1];
    sField.disabled = true;

    return result;

},

getSliderAndVField: function (){
    var me = this;
    var result = this.callParent(arguments);
    var vField = result.items[1];
    vField.disabled = true;

    return result;

}

});

Upvotes: 1

Views: 321

Answers (1)

JChap
JChap

Reputation: 1441

Based on Validating css color names here is how you can define validator for the hex field. I'm assuming you want hexField to be editable.

getMapAndHexRGBFields: function (childViewModel) {
        var me = this;
        var result = this.callParent(arguments);
        var hexField = result.items[1].items[0];
        hexField.readOnly = false;
        hexField.validator=  function (val) {
            var validateColor = function(stringToTest) {
                if (stringToTest === "") { 
                    return false; 
                }
                if (stringToTest === "inherit") { return false; }
                if (stringToTest === "transparent") { return false; }

                var image = document.createElement("img");
                image.style.color = "rgb(0, 0, 0)";
                image.style.color = stringToTest;
                if (image.style.color !== "rgb(0, 0, 0)") { return true; }
                image.style.color = "rgb(255, 255, 255)";
                image.style.color = stringToTest;
                return image.style.color !== "rgb(255, 255, 255)";
            };

            var isValid = validateColor(val);

            var errMsg = "Not a valid Color";
            return isValid ? true : errMsg;
        };
        hexField.listeners = {
            change: function(field, value){
                if(field.isValid()) {
                    me.setValue(value);
                }
            }
        };
        return result;
    }

Upvotes: 1

Related Questions