ASP MVC jQuery 验证 onfocusout 工作，但不是表单提交

Question

我的 ASP MVC 项目和 jQuery 客户端验证存在问题。 问题是当按下提交按钮时，表单被验证但错误没有显示并且表单被提交。 只有当我在验证方法中调用 valid() 时才会出现问题。 例如：我有一个 isdatebefore 和 isdateafter 验证方法。 我想检查#start 是否在#end 之前。 因此，在验证 #start 时，它还会在 #end 上调用 validate 以确保错误消息在两个元素上出现/消失。 我添加了 onfocusout 验证，这工作得很好（在 #start 和 #ejnd 字段以及表单中的所有其他字段上）。 但是，当我按下提交按钮时，表单被验证（我放置了一些断点以查看是否调用了该方法），但尽管存在错误，但仍被提交。

这是我的代码：

// Add IsDateAfter validation
$.validator.addMethod("isdateafter", function (value, element, params) {
    var self = $(element);
    var parts = element.name.split(".");
    var prefix = "";
    for (var i = 0; i < parts.length - 1; i++)
        prefix = parts[i] + ".";
    var otherElement = $('input[name="' + prefix + params.propertytested + '"]');
    var startdatevalue = otherElement.val();
    if (!value || !startdatevalue)
        return true;
    var allowequal = params.allowequaldates.toLowerCase() === "true";
    var start = Globalize.parseDate(startdatevalue);
    var end = Globalize.parseDate(value);
    if (!self.data('reval')) {
        self.data('reval', true);
        otherElement.data('reval', true);
        otherElement.valid();
        self.data('reval', false);
        otherElement.data('reval', false);
    }
    var isValid = allowequal ? start <= end :
        start < end;
    if (isValid) {
        self.removeClass('input-validation-error');
    }
    return isValid;
});

$.validator.unobtrusive.adapters.add(
    'isdateafter', ['propertytested', 'allowequaldates'], function (options) {
        options.rules['isdateafter'] = options.params;
        options.messages['isdateafter'] = options.message;
    });

// Add IsDateBefore validation
$.validator.addMethod("isdatebefore", function (value, element, params) {
    var self = $(element);
    var parts = element.name.split(".");
    var prefix = "";
    for (var i = 0; i < parts.length - 1; i++)
        prefix = parts[i] + ".";
    var otherElement = $('input[name="' + prefix + params.propertytested + '"]');
    var startdatevalue = otherElement.val();
    if (!value || !startdatevalue)
        return true;
    var allowequal = params.allowequaldates.toLowerCase() === "true";
    var start = Globalize.parseDate(startdatevalue);
    var end = Globalize.parseDate(value);
    if (!self.data('reval')) {
        self.data('reval', true);
        otherElement.data('reval', true);
        otherElement.valid();
        self.data('reval', false);
        otherElement.data('reval', false);
    }
    var isValid = allowequal ? start >= end :
        start > end;
    if (isValid) {
        $(element).removeClass('input-validation-error');
    }
    return isValid;
});

$.validator.unobtrusive.adapters.add(
    'isdatebefore', ['propertytested', 'allowequaldates'], function (options) {
        options.rules['isdatebefore'] = options.params;
        options.messages['isdatebefore'] = options.message;
    });

代码在 onfocusout 事件中运行良好，但在 onsubmit 事件中调用时出现问题。 当我删除对 otherElement.valid(); 的调用时一切都恢复正常了（但我需要验证另一个元素才能正常工作）。

那么有谁知道我如何在验证一个元素时继续验证这两个元素并且仍然不会在提交时搞砸？

Answer 1

您不能在另一个 jQuery Validate 方法中使用 .valid() 方法。

Use .element() instead...

$('#yourForm').validate().element(otherElement);

或使用关键字this，它代表插件自身方法中的validator对象...

this.element(otherElement);

或者您已经验证为有效（如果 this 关键字有效，则有些重复）...

otherElement.parents('form').validate().element(otherElement);