Jquery Validate errorPlacement

Posted 2023-05-09

【中文标题】Jquery Validate errorPlacement

【英文标题】：

【发布时间】：2011-11-06 16:14:08

【问题描述】：

我正在使用 jquery validate 验证表单，并且在始终设置错误位置时遇到了一些麻烦。输入字段有不同级别的嵌套，有些在 div 中，有些在嵌套的 div 中。但是，对于所有错误，我希望将其放在相关输入字段上方的类“变暖”的跨度中。我试过最亲近的父母，但似乎不起作用。我可以显式遍历树，但只有在元素处于同一嵌套级别时才有效？我认为最接近的应该可以工作，但它没有（我做错了什么）任何帮助表示赞赏。

$("#paymentpreferences").validate(
    rules:     
        minpayment: 
            digits: true,
            min: 5
                   
    ,
    errorPlacement: function(error, element)       
        $(element).parents('span .warming :first').html(error);
    ,
    success: function(label)           
        label.next().next().addClass('tick');
    
); 

示例 Html，请参阅“方法”选择在嵌套 div 中，但帐户不在

                                    <span class="warming"></span>
                                      <div class="lab_box"><label class="lab">payment type</label></div>
                                        <div class="input_box">
                                            <div class="gender_box">

                                                <select name="method" id="method" tabindex="1" class="ins required">
                                                <option value="1" label="PayPal">PayPal</option>
                                                </select>                                       
                                            </div>
                                            <a href="#" title="tooltip_paymentmethod" class="question tooltips"></a>
                                            <div class=" fill"></div>
                                        </div>
                                        <div class="wb_clear"></div>
                                        <span class="warming"></span>

                                        <div class="lab_box"><label class="lab">account number</label></div>
                                        <div class="input_box">
                                            <span>
                                            <input type="text" name="accountno" id="accountno" value="asdasd" tabindex="2" class="ins required" size="30" />
                                            </span>
                                            <a href="#" title="tooltip_accountno" class="question tooltips"></a>
                                            <div class="fill"></div>
                                        </div>

【参考方案1】：

如果您想在特定 div 或 span 中明确指定错误消息，您可以在该元素的错误位置中编写类似这样的内容。

if ( element.is("#your_field") )
     error.appendTo('#your_field_err');

这里 your_field_err 是您的错误 div 或 span 的 ID。并且 your_field 是该字段的 id。 就像您在代码中提到的复杂结构一样。 请确保将此类错误放置在顶部和最通用的位置，就像在底部的代码中一样。