类在第一次检查时没有被添加到错误元素中,但是当字段再次被检查时一切正常(jquery验证插件)

Class is not being added to the error element on first check , but when field is being checked again all going ok (jquery validation plugin)

本文关键字:检查 验证 jquery 字段 插件 添加 第一次 错误元素      更新时间:2023-09-26

看看我的js和html代码:http://jsfiddle.net/2LRv7/2/

有一个问题。不要在输入中写任何东西,只需按提交按钮。两个输入之后都出现了错误消息块。它们被黄色边框包围,但它们必须被黄色边框包围,并在粉红色的背景上。未添加消息类。

如果您再次单击发送按钮或单击字段并单击其他地方(字段外)或单击页面上的某个地方,只是在第一次验证块样式将被更改(背景变为粉红色)。

我不知道为什么,但是消息类不添加到标签元素类。这个动作在高亮/去高亮块中指定(js部分的5-12行)。

我不确定,但我认为错误在这个通道的某个地方:

    $("#countersForm").validate({
        debug: true,
        validClass: "active",
        highlight: function(element, errorClass, validClass) {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").addClass(errorClass).addClass('message');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass).removeClass('message');
        },
        errorPlacement: function (error, element) {
            console.log(error);
            var br = $( "<br>" );
            error.insertAfter(element);
            br.insertAfter(element);
        }
    });

为什么会发生这种情况?

需要在errorPlacement函数中添加错误类

检查这个小提琴

errorPlacement: function (error, element) {
        console.log(error);
        var br = $( "<br>" );
        error.insertAfter(element).addClass('message');
        br.insertAfter(element);
    }