显然 JQuery Validatin 插件中的 errorPlacement 和 highlight 之间存在冲突

Question

我有一个包含一个文本框和两个微调器的对话框：

<div id="dialogCategory" title="Categoria">
    <form id="formAddCategory">
        <div class="ui-widget" style="padding-top: 4px; padding-bottom: 4px">
            <label for="txtCategoryName">Nome categoria:</label>
            <input type="text" id="txtCategoryName" name="txtCategoryName" class="ui-widget ui-widget-content ui-corner-all" size="10"/>
        </div>
        <div  style="padding-top: 4px; padding-bottom: 4px">
            <label for="spinTeamNumber">Numero di squadre:</label>
            <input id="spinTeamNumber" name="spinTeamNumber" style="display: inline-block" size="3" maxlength="3">
        </div>
        <div style="padding-top: 4px; padding-bottom: 4px">
            <label for="spinCatMinutes">Minutaggio giornaliero:</label>
            <input id="spinCatMinutes" name="spinCatMinutes" style="display: inline-block" size="3" maxlength="3">
        </div>
    </form>
</div>

当我单击 "OK" 按钮时，我使用 jQuery 验证插件对字段进行了验证。

我修改了 errorPlacement 函数来区分两个不同控件之间的行为。我需要在文本框和微调器中将错误放置在不同的位置。这有效。

errorPlacement : function(error, element) {
    console.log(element);
    if ($(element).hasClass("ui-spinner-input")) {
        error.insertAfter(element.parent());
    } else {
        error.insertAfter(element);
    }
}

之后，我需要区分文本框和微调器之间的突出显示元素。为此，我引入了两个回调函数 "highlight" 和 "unhighlight".

highlight : function(element, errorClass, validClass) {
    if ($(element).hasClass("ui-spinner-input")) {
        var temp = $(element).parent();
        temp.addClass(errorClass).removeClass(validClass);
    } else {
        $(element).addClass(errorClass).removeClass(validClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
    }
},
unhighlight : function(element, errorClass, validClass) {
    if ($(element).hasClass("ui-spinner-input")) {
        var temp = $(element).parent();
        temp.removeClass(errorClass).addClass(validClass);
    } else {
        $(element).removeClass(errorClass).addClass(validClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
    }
}

不再进入函数"errorPlacement"。

为什么？

Answer 1

Apparently there is a conflict between errorPlacement and highlight...

errorPlacement 回调用于 "placing" 错误标签到您的布局中。完成后，插件会简单地切换它们。

也就是说，您通过将错误 [=74=] 添加到 label 元素来制造自己的冲突...

$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);

默认情况下，插件使用 label 个元素作为错误消息的容器。我什至无法判断您要在此处 select 哪些 label 元素...您的元素或插件创建的标签？

换句话说，在应用 error class 后，您的 label 元素与动态创建的 label 看起来相同 ] 用于错误消息的元素。现在插件无法区分它们，所以它将接管它找到的第一个......你的。

使用 errorElement 选项将默认错误容器从 label 更改为 span，清除它。

errorElement: "span"

演示：http://jsfiddle.net/199qtuh4/3/

使用此解决方案，您尝试定位哪些目标并不重要。针对 span 也有效...

$(element.form).find("span[for=" + element.id + "]").addClass(errorClass);

演示：http://jsfiddle.net/199qtuh4/2/

或者如果你真的想select两者...

$(element.form).find("[for=" + element.id + "]").addClass(errorClass);

演示：http://jsfiddle.net/199qtuh4/5/

如果不能完全确定您想要 select 的 label 个元素，您可能可以使用 [=27] 来简化代码=].然后您可以将默认错误消息元素保留为 label.

 $(element).next("label").addClass(errorClass);

演示：http://jsfiddle.net/199qtuh4/4/

最后一个演示的目的是向您展示可以通过更准确的 DOM 遍历和 selection 来解决冲突。

显然 JQuery Validatin 插件中的 errorPlacement 和 highlight 之间存在冲突

Apparently there is a conflict between errorPlacement and highlight in the JQuery Validatin Plugin

jquery

jquery-validate