具有忽略和显示/隐藏消息的MVC5 C＃jQuery非侵入式验证

Question

我的用户已要求我将其中一个字段从必填字段更改为可选字段，但仍显示/隐藏警告消息。 尝试使用尽可能少的重构来做到这一点，我在服务器上的数据注释和客户端上的jquery方法中添加了allowsubmission属性（请参见下文）。

是否可以在仍然隐藏/显示消息的同时在元素上设置忽略类？ 似乎该方法第一次触发，然后在添加了ignore类之后停止触发，因此消息停留在屏幕上。

或者，还有更好的方法？ 谢谢。

$(document).ready(function () {
    $("form").validate().settings.ignore = ".ignore, :hidden";
});

$.validator.unobtrusive.adapters.add('dependentrange', ['minvalueproperty', 'maxvalueproperty', 'allowsubmission'],
      function (options) {
          options.rules.dependentrange = options.params;
          if (options.message) {
              $.validator.messages.dependentrange = options.message;
          }
      }
);

$.validator.addMethod('dependentrange', function (value, element, params) {
    var minValue = parseFloat($('input[name="' + params.minvalueproperty + '"]').val());
    var maxValue = parseFloat($('input[name="' + params.maxvalueproperty + '"]').val());
    var currentValue = parseFloat(value);

    // if there is a value check it. If for some reason the min and max can't be found return true because 
    // i do not know the values to validate. Usually that is a coding mistake
    if (isNaN(currentValue) || minValue > currentValue || currentValue > maxValue) {

        var message = $(element).attr('data-val-dependentrange');

        $.validator.messages.dependentrange = $.validator.format(message, minValue, maxValue);

        if (params.allowsubmission) {
            // once this property is added, the method does not fire
            $(element).addClass("ignore");
        }

        return false;
    }

    $(element).removeClass('ignore');

    return true;

}, '');

Answer 1

我最终使用验证器API来显示和隐藏自己的警告消息，而始终返回true。

$.validator.unobtrusive.adapters.add('dependentrange', ['minvalueproperty', 'maxvalueproperty'], function (options) {
    options.rules['dependentrange'] = options.params;
    if (options.message) {
        options.messages['dependentrange'] = options.message;
    }
});

$.validator.addMethod("dependentrange", function (value, element, params) {
    var valKeyed = parseFloat(value),
        $elem = $(element),
        $warning = $elem.closest('div').nextAll('.alert-warning:first')
        msg = $elem.data('val-dependentrange),
        isValid = this.optional(element) || valKeyed >= parseFloat(params.minvalueproperty) && valKeyed <= parseFloat(params.maxvalueproperty);

    // there are no from or two found, so just return true with no warning
    if (!params.minvalueproperty || !params.maxvalueproperty) {
        return true;
    }

    if (isValid) {
        $warning.text('')
        $warning.addClass('hidden');
    }
    else {
        $warning.text(msg)
        $warning.removeClass('hidden');
    }

    return true;
});