Jquery.Validate() 在相同的表格上

Question

我正在尝试覆盖 jQuery.Validate() 中的默认错误样式。我没有让默认设置打印出深红色标签，而是尝试将其设置为 div 父级。所以这是交易：我在同一个页面上有两个相同的表格（网络编辑可以选择他或她想要的数量）。每个表单共享相同的 class ：'.formClass'。

下面的代码在 $(document).ready 范围内定义，并为所有必填字段设置 "rules {} list"。

    $(".formClass").find("input[data-val-required]").each(function () {
    var name = $(this).attr("name").toLowerCase();
    if (name.match("email")) {
        $(this).rules('add', {
            email: true
        });
    }
    $(this).rules('add', {
        required: true
    });
});

这是主要功能：

$(".formClass").validate({
//errorLabelContainer: '#testestets', //Displays a collection of the generated error messages 
focusInvalid: true,
errorElement: "div",
wrapper: 'div', // a wrapper around the error message
errorPlacement: function (error, element) {
    $(element).closest('.form-field').addClass("errorOnThis");
},
messages: {
    name: {
        required: "testing..",
    },
},

invalidHandler: function (event, validator) {
    var errors = validator.numberOfInvalids();
    alert(errors);

},
highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass);
}

});

表单只有两个必填字段：姓名和电子邮件。如果我 post 表单让我们为 Name 说一个空值。它将突出显示输入以及我想要的样式。但是，如果我再次 post 它而不将名称更改为有效值，则无论任何无效输入，表单都会提交。为什么？

另一个问题，只有我的第一个表单获得了这些自定义更改，我的第二个表单看起来与第一个相同，但仍然获得默认错误消息。使困惑。

有没有办法处理像`

这样的回调错误

highlight: function (element, errorClass, validClass) {

     $(element).parents("form:first").find("input[type='submit']").attr("disabled", "disabled");
    },
    unhighlight: function (element, errorClass, validClass) {
        if (!element.isValid()) {
            highlight(element, errorclass, validClass);
        } else {
           $(element).parents("form:first").find("input[type='submit']").removeAttr("disabled");            }

    }`

我试过了，但没有用，所以如果有人能在我的代码中找到缺陷，我将永远感激 :)

Answer 1

"I'm trying to override the default error styling in jQuery.Validate(). Instead of having the default settings printing out a dark-red label I tried to style it's div parent instead."

jQuery 验证插件中没有设置错误消息样式的任何内容。它只是为消息创建 HTML 标记并应用 error class。由您来创建 CSS。因此，如果它是深红色，那么这是您 CSS 中的某些东西导致的，而不是插件。

I have two identical forms, (a web editor can choose how many he or she wants), on the same page. Each form shares the same class : '.formClass'.

....

Only my first form is getting these custom changes, my second form, which looks identical to the first one, still gets the default error messages. Confused.

您不能将.validate()附加到代表多个元素的jQuery选择器。如果您希望将相同的设置应用于使用相同 class 名称的两个表单，那么您将需要 jQuery .each()。否则只有第一个表格附加到 .validate().

$(".formClass").each(function() {
    $(this).validate({ 
        // your options
    });
});

关于您的代码：

unhighlight: function (element, errorClass, validClass) {
    if (!element.isValid()) {
        highlight(element, errorclass, validClass);  // <-????
    ....

没有 highlight() 这样的东西，这会破坏您的代码。 highlight 是 .validate() 方法的一个选项，而不是一个你可以随意插入的函数。

此外，您不会成为 enabling/disabling highlight/unhighlight 中的按钮。 highlight 和 unhighlight 用于单个表单域上的 adding/removing classes，因为这些表单域变为 valid/invalid。 你放在 highlight/unhighlight 里面的任何东西都会覆盖默认行为。 如果你想切换按钮的 disable 属性，你可能想使用 submitHandler 和 invalidHandler 选项，其中 submitHandler 在有效表单上触发，invalidHandler 在无效表单上触发。

Jquery.Validate() 在相同的表格上

Jquery.Validate() on identical forms

jquery

jquery-validate

Jquery.Validate() 在相​​同的表格上

Jquery.Validate() on identical forms

jquery

jquery-validate

Jquery.Validate() 在相同的表格上