Jquery Validation 插件自定义错误放置

Question

使用以下形式的 jQuery 验证插件：

<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 标记内？ （#invalid-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>

现在添加以下行：

这是标准错误标签：

<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
        ));
    }
});

我已经使用了很多元数据具有类似的功能，效果相当好...注意，我在元数据周围使用了单引号（撇号），这样您就可以使用 JSON 序列化器服务器端注入标签的该部分（应该使用双引号） - 字符串周围的引号）...不过，文字 apos 可能是一个问题（将字符串中的“'”替换为“\x27”）。