Skip to main content
 首页 » 编程设计

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

2024年10月25日17duanxz

使用 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)

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

谢谢

请您参考如下方法:

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

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

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