Dynamically changing jQuery untrusted attributes

Question

I have a page built in ASP.NET MVC 4 that uses the jquery.validate.unobtrusive library for client-side validation. There is an input that must be in the range of numbers. However, this range can be dynamically changed based on user interactions with other parts of the form.

The default values ​​are checked just fine, however, after updating the attribute, the data-rule-rangecheck and message are still started at the original values.

Here is the entry to load the start page:

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

Correctly this is confirmed by the message Please enter an amount between $1 and $350if a number greater than 350 is entered.

After the event is triggered elsewhere, it is updated data-rule-range, and the element looks like this:

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

At this point, if you enter 500 at the entrance, he will refuse to check with the same previous message, which says that it should be between 1 and 350 US dollars. I also tried removing the validator and unobtrusive image from the form and parsing it again without any luck.

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

Is there a clean way to change validation behavior based on dynamic input attributes?

Answer 1

You cannot change rules dynamically by changing data attributes. This is because the jQuery Validate plugin is initialized by the existing load attributeson the page ... there is no way to automatically re-initialize the plugin after making dynamic changes to the attributes.

.rules('add') .rules('remove'), .

: http://jqueryvalidation.org/rules/

Answer 2

, . , , :

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.

, . , , - -val.

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

Answer 3

you can try the following:

// reset the form validator
$("form").removeData("validator");

// change the range
$("#amount").attr("data-rule-range", "[1,600]");

// reapply the form validator
$.validator.unobtrusive.parse(document);

Answer 4

Charle solution works! you cannot use model attributes, but I am building my inputs, for example:

      @Html.TextBoxFor(m => Model.EnterValue, new
           {
               @class = "form-control",
               id="xxxx"
               data_val = "true",
               data_val_range = String.Format(Messages.ValueTooBig, Model.ParamName),
               data_val_range_max = 6,
               data_val_range_min = 2,
               data_val_regex_pattern = "^\\d+(,\\d{1,2})?$"
           })

and then in javascript:

 $("form").removeData("validator");
        $("#xxxx").attr('data-val-range-max', 3)
        $("#xxxx").attr('data-val-range-min', 0)
        $.validator.unobtrusive.parse(document);