Question

I’m validating a form with jquery validate, and having a little trouble consistantly setting the error placement. The input field have different levels of nesting, some are in div some are in nested divs. However for all errors I want to be placed in the span with the class ‘warming’ above the input field in question. I have tried closest, parents and seems to not work. I can explicitly traverse the tree but that only works if the elements are at the same level of nesting? I think closest should work but it doesn’t (well I am doing something wrong) any help appreciated.

$("#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');
    }
}); 

Sample Html, see ‘method’ select is in a nested div but the accountno is not

                                    <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>

Answer 1

If you want to specifically specify the error message in a particular div or a span you can just write in error placement for that element something like this.

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

Here your_field_err is your error div or span’s ID. and your_field is id of the field.
Like in your code you’ve mentioned complex structure.
Please make sure that you place these kind of error placement on the top and most generic like in your code at the bottom.