1

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

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

这是小提琴：http: //jsfiddle.net/wyFQp/1/

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>

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

4

1 回答 1

4

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

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

小提琴

将其与无线电输入相关联时，错误标签的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');
        }
    }
});

更新的小提琴

当然，您也可以使用其他 DOM 操作方法将错误元素添加到 DOM，例如.append, .prepend, .after, insertAfter，结合基于验证错误的 DOM 遍历，这可能不需要额外的标记，具体取决于您的.beforeHTML结构体。.insertBeforeelement

于 2013-01-22T20:59:40.923 回答