5

当另一个字段中的值发生变化时，有什么方法可以在一个字段上触发特定的 jquery-unobtrusive 规则？

我有一个表单，上面有两个日期字段（比如开始/结束），验证end必须大于start. 这在已经设置end后更改的简单情况下工作正常。start它不允许的是：

  • 先设置end后设置start
  • start在两者都已设置后更改，并违反约束

end服务器端验证当然会捕获它，但是即使在您已经修复后设置错误start，或者当值end更改为无效值时也没有显示错误，这看起来很糟糕。触发特定规则的原因是我不想在用户有机会输入值之前在同一字段上触发required或格式化规则。date表格从“干净”开始。但是，如果这是不可能的，那么触发所有规则就可以了。

抱歉没有代码示例，但我什至不知道从哪里开始。

更新：

我目前所做的是在模型中挖掘（因为这是一个 asp.net mvc 项目），找到属性，然后直接读取它的属性。

var controllerCtx = ViewContext.Controller.ControllerContext;
var da = ViewData.ModelMetadata.GetValidators(controllerCtx)
            .SelectMany(x => x.GetClientValidationRules())
            .Where(x => x.ValidationType == "isdateafter")
            .FirstOrDefault();

var otherid = da == null ? "" : da.ValidationParameters["propertytested"];

然后在正常的 HTML 部分，我对它进行测试start，看看它是否是一个日期选择器，然后连接一个基本检查，并触发所有验证规则。由于规则不多，我只是end在运行之前检查字段中是否有值。我想使用下面的巧妙解决方案，当我这周有一点空闲时间时会尝试一下。

@if (otherid != "") {
    <text>
    var other = $("#@otherid");
    if (other && other.hasClass('hasDatepicker')) { // if the other box is a date/time picker
       other.datetimepicker('option', 'onSelect', function(dateText, instance) {
           var lowerTime = $(this).datetimepicker('getDate');
           $("#@id").datetimepicker('option', 'minDate', new Date(lowerTime.getTime()));
           if ($("#@id").val()) { // if there is a value in the other
                $('form').data('validator').element('#@id');
           }
        });
    }
    </text>
}
4

1 回答 1

10

这可能对你有用...

$('form').data('validator').element('#Key')

这会将验证器从您的表单中取出，并强制对单个项目进行验证。

http://docs.jquery.com/Plugins/Validation/Validator/element#element

更新

看看这是否继续有帮助！

$.extend($.validator.prototype, {
        elementWithRule: function(element, rule) {
            element = this.clean(element);
            this.lastElement = element;
            this.prepareElement(element);
            this.currentElements = $(element);
            var result = this.checkSpecificRule(element, rule);
            if (result) {
                delete this.invalid[element.name];
            } else {
                this.invalid[element.name] = true;
            }
            if (!this.numberOfInvalids()) {
                // Hide error containers on last error
                this.toHide = this.toHide.add(this.containers);
            }
            this.showErrors();
            return result;
        },
        checkSpecificRule: function(element, rule) {
            element = this.clean(element);

            // if radio/checkbox, validate first element in group instead
            if (this.checkable(element)) {
                element = this.findByName(element.name).not(this.settings.ignore)[0];
            }

            var findRule = { },
                checkRule = $(element).rules()[ rule ];
            var rules;

            if (checkRule) {
                findRule[rule] = checkRule;
                rules = findRule;
            }

            if (!rules) {
                return;                
            }
            var dependencyMismatch = false;
            for (var method in rules) {
                var rule = { method: method, parameters: rules[method] };
                try {
                    var result = $.validator.methods[method].call(this, element.value.replace( /\r/g , ""), element, rule.parameters);

                    // if a method indicates that the field is optional and therefore valid,
                    // don't mark it as valid when there are no other rules
                    if (result == "dependency-mismatch") {
                        dependencyMismatch = true;
                        continue;
                    }
                    dependencyMismatch = false;

                    if (result == "pending") {
                        this.toHide = this.toHide.not(this.errorsFor(element));
                        return;
                    }

                    if (!result) {
                        this.formatAndAdd(element, rule);
                        return false;
                    }
                } catch(e) {
                    this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
                        + ", check the '" + rule.method + "' method", e);
                    throw e;
                }
            }
            if (dependencyMismatch)
                return;
            if (this.objectLength(rules))
                this.successList.push(element);
            return true;
        }
    });

// Then use it like this...
$('form').data('validator').elementWithRule('#Key', 'required');

似乎没有任何内置方法可以做到这一点，所以我只是一起破解了一些东西！:)

于 2012-05-16T15:36:40.747 回答