Jquery Validate errorPlacement

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>

Vinayak Phal · Accepted Answer · 2011-08-30 10:09:07Z

3

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.

answered Aug 30, 2011 at 10:09

Vinayak Phal

8,9194 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery Validate errorPlacement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related