Question

使用以下表单的jQuery Validation插件：

<form id="information" method="post" action="#">

            <fieldset>
                <legend>Please enter your contact details</legend>
                <span id="invalid-name"></span>
                <div id="id">
                    <label for="name">Name: (*)</label>
                    <input type="text" id="name" class="details" name="name" maxlength="50" />
                </div>

                <span id="invalid-email"></span>
                <div id="id">
                    <label for="email">Email: (*)</label>
                    <input type="text" id="email" class="details" name="email" maxlength="50" />
                </div>
            </fieldset>
            <fieldset>
                <legend>Write your question here (*)</legend>
                <span id="invalid-text"></span>
                <textarea  id="text" name="text" rows="8" cols="8"></textarea>


            <div id="submission">
                <input type="submit" id="submit" value="Send" name="send"/>
            </div>
            <p class="required">(*) Required</p>
            </fieldset>

             </form>

如何将错误放在span标签内？（#valid-name，＃invalid-email，＃invalid-text）

我阅读了有关错误放置的文档，但我没有了解其工作原理。是否可以处理每个错误并将其放在指定的元素中？

谢谢

Answer 1

您还可以在需要的位置手动添加错误标签。在我的特定情况下，我有一个更复杂的形式与复选框列表等，其中插入或插入后会破坏布局。您可以利用验证脚本将评估指定字段是否存在现有标签标记并使用它的事实，而不是这样做。

考虑：

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>

现在添加以下行：

的 <label for="name" class="error" generated="true"></label> 的

是标准错误标签：

<div id="id"> <label for="name">Name: (*)</label> <input type="text" id="name" class="details" name="name" maxlength="50" /> </div> <div id="id-error"> <label for="name" class="error" generated="true"></label> <div>

jQuery将使用此标签而不是生成新标签。对不起，我找不到任何关于此的官方文档，但发现了遇到此行为的其他帖子。

Answer 2

这是一个基本结构，您可以在方法中使用您想要的任何选择器。您有错误元素和无效的元素。

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.prev());
    }
});

或者要定位ID，您可以

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo('#invalid-' + element.attr('id'));
    }
});

未经测试，但应该可以使用。

Answer 3

我发现使用.insertAfter而不是.appendTo可以工作：

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.insertAfter('#invalid-' + element.attr('id'));
    }
});

Answer 4

我正在使用带有验证器的元数据扩展..（注意，我将其设置为在标记上使用data-meta属性...）

<input ... data=meta='{
    errorLabel: "#someotherid"
    ,validate: {
        name:true
    }
}' >

然后在代码中......

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo($(
            $(element).metadata().errorLabel
        ));
    }
});

我一直在使用元数据来实现很多类似的功能，它工作得很好......注意，我使用了元数据周围的单个tick（撇号），这样你就可以使用JSON序列化服务器端了注入标记的那一部分（应该在字符串周围使用双引号）...虽然字面意义可能是一个问题，（在字符串中用“\ x27”替换“'”）。

Jquery Validation插件自定义错误放置

4 个答案: