javascript - 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);