动态更改jQuery不显眼的验证属性

Question

我有一个在ASP.NET MVC 4中构建的页面,它使用jquery.validate.unobtrusive库进行客户端验证.有一个输入需要在一个数字范围内.但是,此范围可以根据用户与表单其他部分的交互动态更改.

默认值验证正常,但是在更新data-rule-range属性后,仍会在原始值上触发验证和消息.

以下是初始页面加载的输入:

<input id="amount" data-rule-range="[1,350]" data-msg-range="Please enter an amount between ${0} and ${1}">

Please enter an amount between $1 and $350如果输入的数字大于350,则会正确验证消息.

事件在其他地方触发后,data-rule-range会更新,元素看起来如下:

<input id="amount" data-rule-range="[1,600]" data-msg-range="Please enter an amount between ${0} and ${1}">

此时,如果在输入中输入500,则将使用相同的先前消息验证失败,该消息表明它必须在$ 1和$ 350之间.我也试过从表单中删除验证器和unobtrusiveValidation并再次解析它没有运气.

$('form').removeData('validator');
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

是否有一种干净的方法可以动态地根据输入属性更改验证行为？

Answer 1

正如Sparky所指出的那样,在初始化验证插件后,不会动态更改默认属性.为了最好地解决这个问题而不重新注册我们如何注册经过验证的字段和规则,我发现在不显眼的库中注册自定义适配器最容易:

jQuery.validator.unobtrusive.adapters.add("amount", {}, function (options) {
  options.rules["amount"] = true;
  options.messages["amount"] = function () { return $(options.element).attr('data-val-amount'); };
});

jQuery.validator.addMethod("amount", function (val, el, params) {    
  try {
    var max = $(el).attr('data-amount-max');
    var min = $(el).attr('data-amount-min');
    return val <= max && val >= min;
  } catch (e) {
    console.log("Attribute data-amount-max or data-amount-min missing from input");
    return false;
  }
});

因为消息是一个函数,所以每次都会对它进行评估,并始终为其选取最新的属性值data-val-amount.这样做的缺点的解决方案是,每次有我们需要改变输入的所有三个属性的变化:data-amount-min,data-amount-max,和data-val-amount.

最后这里是初始加载时的输入标记.需要在加载时出现的唯一属性是data-val-amount.

<input id="amount" data-val-amount="Please enter an amount between ${0} and ${1}" data-val="true">

Answer 2

您无法通过更改数据属性来动态更改规则.这是因为jQuery Validate插件是使用现有attributes的页面加载初始化的...在对属性进行动态更改后,插件无法自动重新初始化.

您必须使用开发人员提供的.rules('add')和.rules('remove')方法.

请参阅:http: //jqueryvalidation.org/rules/