自定义验证规则不适用于 Webix 拾色器

Question

我正在使用 webix 作为我的 JavaScript 前端。

我创建了一个带有 colorpicker 视图的表单。在 Webix 中，默认情况下，colorpicker 只允许用户从预先选择的颜色范围中挑选，returns 是所选颜色的十六进制代码。

可以使用选项 editable: true 覆盖此行为以允许输入任何颜色。但是，editable: true 允许用户在 colorpicker 中输入任何内容，就像在自由文本字段中一样。

我正在尝试使用自定义验证来解决此问题。我应该能够在自定义验证函数中设置 return false 以提醒用户用户存在无效值并防止表单在修复之前被保存。但是，自定义验证函数在 colorpicker.

上使用时永远不会被调用

这是我正在尝试的 webix 片段： 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})
        }
    }
});

Answer 1

你几乎是对的：https://snippet.webix.com/4mw3mxk8

事情是这样的：

作为规则中的键，您必须使用控件的名称（"color" 在您的情况下）
webix.rules 仅包含预定义的验证规则（isEmail、isNotEmpty 等）

自定义验证规则不适用于 Webix 拾色器

Custom Validation Rules do not work for Webix Colorpicker

validation

color-picker

webix