validationcolor-pickerwebix

Custom Validation Rules do not work for Webix Colorpicker

I'm using webix as my JavaScript front end.

I've created a form with a colorpicker view. In Webix, by default, the colorpicker only allows users to pick from a pre-selected range of colors, and returns the hex code of the color selected.

This behavior can be overridden to allow entering of any color by using the option editable: true. However, editable: true allows users to enter anything into the colorpicker as if were a free text field.

I'm trying to use a custom validation to work around this. I should be able to return false in the custom validation function to alert the user user of an invalid value and to prevent the form from being saved until it's fixed. However, the custom validation function never gets called when used on the colorpicker.

Here's a webix snippet of what I'm trying: https://snippet.webix.com/28oadxzl

webix.ui({
    view:"form",
    id: "theForm",
    name: "theForm",
    elements:[
        {
            view:"colorpicker",
            label:"color",
            name:"color",
            id: "color",
            editable: true,
            validate: webix.rules.iscolor,
            on:  {
                onChange:  function(newv, oldv)  {
                    // this gets called every time the color picker is changed.
                    webix.message({text: "onChange: " + newv})
                    this.validate();
                }
            }
        },
        {
            view:"button",
            type:"form",
            value:"ok",
            width:200,
            align:"right",
            click: function()  {
                // this gets called when the "ok" button is clicked.
                webix.message({text: "click"});
                $$("theForm").validate();
            }
        }
    ],
    rules:  {
        iscolor:  function(value)  {
            // never gets called!  Should be called on colorpicker change and on "ok" click.
            return false;  // replace with regex hexcode validation.
            webix.message({text: "iscolor: " + value})
        }
    }
});
Solution

  • You were almost right: https://snippet.webix.com/4mw3mxk8

    The thing is that: