Question

I have the following code:

<form id="reg_form_pay" class="fancy_form" action="" method="POST">
  <div class="wrap_input" style="margin-bottom: 10px;">
    <p class="inp_label">Firstname:</p>
    <i> </i>
    <input id="pay_firstname" type="text" value="" name="FirstName" style="width: 157px;">
  </div>
  <div class="wrap_input" style="margin-bottom: 10px;">
    <p class="inp_label">Surname:</p>
    <i> </i>
    <input id="pay_lastname" type="text" value="" name="Surname" style="width: 157px;">
  </div>
  <div class="wrap_input" style="margin-bottom: 10px; margin-top: 34px;">
    <p class="inp_label">E-mail:</p>
    <i> </i>
    <input id="pay_email" type="text" value="" name="Email" style="width: 157px;">
  </div>
  <div class="wrap_input" style="margin-top: 34px;">
    <p class="inp_label">Phone:</p>
    <i> </i>
    <input id="pay_phone" type="text" value="" name="PhoneNumber" style="width: 157px;">
  </div>
</form>

And validation:

$("#reg_form_pay").validate({
            rules: {
                Email: { required: true, email: true, checkEmail: true },
                PhoneNumber: { required: true, checkPhoneNumber: true },
                FirstName: { required: true },
                Surname: { required: true }
            }, 
        });

By default, validator write label when validation is false. I dont’t want add element with error description. I want to add class error to parent div with class wrap_input. How can I say to validator to do this?
Thanks.

Answer 1

Adding this to the options sent to validate would work:

showErrors: function(errorMap, errorList) {
    $.each(errorList,function(i,e){
        $(e.element).parents('.wrap_input').addClass('error');
    });                   
}

Live example: http://jsfiddle.net/nqp8J/