JavaScript: 动态改变数据范围规则的值

Question

我有一个输入字段，它允许负数和正数，或者只允许基于 select.

值的正数

当更改 select 选项的值时，我正在尝试修改输入字段的规则，如下所示：

const id = '#myId';
$(id).attr("data-val-range-min", -10000);
removeRules(id);
addRules(id);
$(id).change(); // trying to trigger the validation of the rule

removeRules是一个函数：

let removeRules = function removeRules(field) {
    $(field).rules('remove');
}

addRules也是如此：

let addRules = function addRules(field) {
    let $field = $(field);
    
    if ($field.attr("data-val-required")) {
        $field.rules("add", {
            required: true,
                messages: {
                    required: $field.attr("data-val-required")
                }
        });
    }
    
    if ($field.attr("data-val-number")) {
        $field.rules("add", {
            number: true,
                messages: {
                    number: $field.attr("data-val-number")
                }
        });
    }

    if ($field.attr("data-val-range")) {
        $field.rules("add", {
            range: [$field.attr("data-val-range-min"), $field.attr("data-val-range-max")],
                messages: {
                    range: $field.attr("data-val-range")
            }
        });
    }
}

当我更改 UI 中的 select 时，data-val-range-min 属性设置正确，但没有重新应用规则。

只有当我手动单击输入字段并再次取消select时，规则才会应用...

我做错了什么？

提前致谢

Answer 1

Only when I manually click into the input-field and deselect it again, the rule is applied...

有一个您认为不属于插件的验证触发器。

默认情况下，此插件会在以下时间触发验证：

onfocusout - 当你离开一个元素时
onkeyup - 当您在文本框内输入时
onclick - 与单选框、复选框和 select

尽管添加和删除规则还不够...您还需要在添加或删除规则后强制执行验证测试。

当您想要以编程方式强制验证时，只需在元素或表单上调用 .valid() 方法。由于您的 OP 包含零 HTML 标记或工作演示，我无法提供更具体的解决方案。

JavaScript: 动态改变数据范围规则的值

JavaScript: dynamically changing values of data range rule

javascript

jquery

jquery-validate