jquery - Jquery Validator Error Border

Question

I have a form and I want to validate my select box.

<div id="wwctrl_add_savedAddressId" class="wwctrl styled-select">
    <select id="add_savedAddressId" class="required savedAddress checkDropdown">
</div>

I used the jquery validator to validate it.

  initValidation: function(){
            $(this.initVariables.formId).validate({
                  ignore: ":hidden",
                  errorElement: "div",
                  errorPlacement: function(error, element) {
                        error.insertAfter(element.parent());
                  }
            });
  }

If the select box is equal to -Select- it will return an error.

$.validator.addMethod("check_item_dropdown", function(value, element) {  
                return this.optional(element) || value != "-Select-";   
} 

That code is working and it results to

<div id="wwctrl_add_savedAddressId" class="wwctrl styled-select">
      <select id="add_savedAddressId" class="required savedAddress checkDropdown error">
</div>
<div class="error" for="add_savedAddressId" generated="true"> Select item</div>

The error class is equal to the following css

select.error{
    border: 1px solid #F10016;
    height: 23px;
}

As i have observed that the jquery validator is the one who appends the "error" class on the element itself.

The problem is, If i am validating a select box, I want the error class to be on the parent of the select box (in this case #wwctrl_add_savedAddressId) because I want the red color border be placed on the div instead of the select box itself. Why? Because our select box design has a background image and the select box itself is under that image.

How can i set my requirements using the validator?

Note: I have many select box that I need to validate like this. Thank you.

Answer 1

try to hack it if you don't have access to the validator code. try something like this

...
errorPlacement: function(error, element) { 
    error.insertAfter(element.parent()); 
    if (element.is('select')) {
        element.removeClass('error');
        element.parent().addClass('error');
    }
}
...