Question

我试图覆盖jQuery.Validate（）中的默认错误样式。我没有将默认设置打印出一个暗红色的标签，而是试图将它设置为div的父级。所以这就是交易：我有两个相同的表单，（网页编辑可以选择他或她想要的数量），在同一页面上。每个表单共享相同的类：＆＃39; .formClass＆＃39;。

以下代码在$（document）.ready范围内定义并设置＆＃34; rules {} list＆＃34;对于所有必填字段。

    $(".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);
}

}）;

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

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

有没有办法处理回调错误，如`

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

“我正在尝试覆盖jQuery.Validate（）中的默认错误样式。而不是使用默认设置打印出一个暗红色标签，而是尝试将其设置为div父级样式。”

jQuery Validate插件中没有任何内容可以设置错误消息的样式。它只是为消息创建HTML标记并应用error类。由你来创建CSS。所以，如果它是暗红色，那么你的CSS中会出现这种情况，而不是插件。

我有两个相同的表单，（网页编辑可以选择他或她想要的数量），在同一页面上。每个表单共享相同的类：'。formClass'。

...

只有我的第一个表单是获取这些自定义更改，我的第二个表单看起来与第一个表单相同，仍然会收到默认的错误消息。困惑。

您无法将.validate()附加到代表多个元素的jQuery选择器。如果您希望使用相同的类名将相同的设置应用于两个表单，那么您将需要一个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()方法的一个选项，而不是您可以随意插入的函数。

此外，您不会在highlight/unhighlight中启用/禁用该按钮。 highlight和unhighlight用于在单个表单字段上添加/删除类，因为这些表单字段变为有效/无效。 您置于highlight/unhighlight内的任何内容都将覆盖默认行为。如果您想切换按钮的disable属性，您可能希望使用{{1} }和submitHandler选项，其中invalidHandler在有效表单上触发，submitHandler在无效表单上触发。

Jquery.Validate（）在相同的表单上

1 个答案: