Question

我的表格中有两个单选按钮用于选择性别。

我正在使用this插件进行验证。当我在单选按钮上应用验证时，此插件会将错误标签放在两个单选按钮之间。

HTML：

<head>
    <body>
        <form id='registration_form'>
            <input type="radio" value="M" name="gender" class="gender" id="genderm"
            />Male
            <input type="radio" value="F" name="gender" class="gender ml_10" id="genderf"
             />Female
            <input type='submit' />
        </form>
    </body>

如何在两个单选按钮后放置错误标签？或者至少在一些不错的地方？

Answer 1

在标记中添加错误标签，您希望显示错误：

<label class="error" generated="true" for="gender" style="display:none;"></label>

Fiddle

当将其与无线电输入相关联时，错误标签的for属性对应于无线电'name - 这有利于事物，因为具有相同名称的无线电将一次仅选择一个无线电且一个错误与该组相关的标签但是，对于文字输入（以及select / textarea / type="checkbox"），必须使用id。

另一种不太讨厌的方法是将errorPlacement选项与错误容器一起使用，例如：

<div id="genderErrorContainer"></div>

$("#registration_form").validate({
    rules: {[...]},
    messages: {[...]},
    submitHandler: fn,
    errorPlacement: function(error, element) {
        if (element.prop('name') === 'gender') {
            error.appendTo('#genderErrorContainer');
        }
    }
});

Updated fiddle

当然，您也可以使用其他DOM操作方法将错误元素添加到DOM，例如.append，.prepend，.after，insertAfter，{ {1}}，.before结合DOM遍历，基于导致验证错误的.insertBefore，根据您的HTML结构，可能不需要额外的标记。

单选按钮上的jQuery验证

1 个答案: