jquery-validate - Jquery Validation 插件自定义错误放置

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 标签内？ (#invalid-name, #invalid-email, #invalid-text)

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

谢谢

Answer 1

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

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

未经测试，但应该可以工作。