jQuery 验证插件复选框 errorPlacement答案

【问题标题】：jQuery Validation Plugin Checkbox errorPlacementjQuery 验证插件复选框 errorPlacement
【发布时间】：2009-07-06 20:10:54
【问题描述】：

我有一组具有相同名称的复选框。他们都有不同的价值观。它们只是表格的一部分。它们不构成整个表格。我希望复选框在该组的最后一个复选框之后显示它们的错误。

在 jQuery 中可以做这样的事情吗？

$("#myform").validate({
  errorPlacement: function(error, element) {
     var checkboxes = $("#checkboxes");
     if(checkboxes.contains(element))
        label.insertAfter(checkboxes[checkboxes.length-1]);
   },
   debug:true
 })

我该怎么做呢？

谢谢，
伊恩·麦卡洛

【问题讨论】：

标签： jquery validation checkbox errorplacement

【解决方案1】：

我意识到这是一个较老的问题，但是我需要表单上的类似功能并解决了它。

使用 jQuery 1.4.2

所以给出下面的形式。

<form id="checkForm" method="get" action="">
<ul id="checkboxes">
    <li><input type="checkbox" name="checkOne" id="checkOne" value="1" /></li>
    <li><input type="checkbox" name="checkTwo" id="checkTwo" value="2" /></li>
    <li><input type="checkbox" name="checkThree" id="checkThree" value="3" /></li>
</ul>
<input class="submit" type="submit" value="Submit"/>

那么你可以做以下事情

$("#checkForm").validate({
    rules: {
        checkOne: "required",
        checkTwo: "required",
        checkThree: "required"
    },
    errorPlacement: function(error, element) {
        if ($("#checkboxes").has(element).size() > 0) {
            error.insertAfter($("#checkboxes input:checkbox:last"));
        } else {
            error.insertAfter(element);
        }
    }
});

【讨论】：

【解决方案2】：

这是一个适用于页面上所有复选框的通用解决方案。它将在组的最后一个复选框之后插入一条错误消息。

$('form').validate({
    rules: {
        checkbox_group_1: {
            required: true
        },
        checkbox_group_2: {
            required: true,
        }
    },
    errorPlacement: function(error, element) {
        if (element.is(':checkbox'))
            error.insertAfter($('input[name=' + element.attr('name') + ']').last());
        else
            error.insertAfter(element);
    }
});

【讨论】：

这个例子几乎有效。我只需要在element.attr('name') 部分之前和之后添加双引号。它试图找到input[name=attribute] 而不是input[name="attribute"]。
@mckenna 很有趣。它们应该都可以工作（带引号和不带引号），但我觉得有趣的是它只对带引号的你有用。

【解决方案3】：

你就不能这样做

if(checkboxes.contains(element)) {
  checkboxes.after(label);
}

【讨论】：

【解决方案4】：

变量“标签”在您的代码中做了什么？

你不应该使用'error'变量吗？

error.insertAfter(checkboxes[checkboxes.length-1]);

【讨论】：

这似乎不起作用。我没有收到来自客户端的错误，但也没有收到错误消息。此外，表单不会提交。
您可以尝试在 jsbin.com 上创建一个示例测试页面吗？通过问题进行调试会更容易。