css - Adding jquery validation to Chosen drop down list on post in ASP.NET MVC page -

i'm using default site template visual studio 2013 preview integrates bootstrap default (which replaced v3)

in form, jquery validate on post correctly highlights error fields, except drop down boxes i've styled chosen plugin.

my code drop down list in question is:

@html.dropdownlistfor(     x => x.job.state,     model.states,     "select state", new { @class = "form-control chosen-select"})     @html.validationmessagefor(model => model.job.state) 

this renders follows:

<select class="input-validation-error form-control chosen-select" id="job_state" name="job.state" style="width: 50%; display: none;">     <option value="">select state</option>     <option value="act">act</option>     <option value="nsw">nsw</option>     <option value="qld">qld</option>     <option value="tas">tas</option>     <option value="nt">nt</option>     <option value="vic">vic</option>     <option value="wa">wa</option> </select> <div class="chosen-container chosen-container-single" style="width: 135px;" title="" id="job_state_chosen"><a class="chosen-single" tabindex="-1"><span>select state</span><div><b></b></div> </a>     <div class="chosen-drop">         <div class="chosen-search">             <input type="text" autocomplete="off"></div>         <ul class="chosen-results">             <li class="active-result result-selected" style="" data-option-array-index="0">select state</li>             <li class="active-result" style="" data-option-array-index="1">act</li>             <li class="active-result" style="" data-option-array-index="2">nsw</li>             <li class="active-result" style="" data-option-array-index="3">qld</li>             <li class="active-result" style="" data-option-array-index="4">tas</li>             <li class="active-result" style="" data-option-array-index="5">nt</li>             <li class="active-result" style="" data-option-array-index="6">vic</li>             <li class="active-result" style="" data-option-array-index="7">wa</li>         </ul>     </div> </div> <span class="field-validation-error">state required.</span> 

notice input-validation-error class being added element chosen sets display:none border doesn't shown.

ideally if can add input-validation-error class div that's within select, fix problem, don't know how that, assistance welcome!

note - i'm not after client side validation, i'm using validation on post.

@bartek marnane, you're going need override highlight , unhighlight callbacks jquery validate uses default when applying it's failed validation css class. you'll want inspect element on highlight , unhighlight see if it's chosen drop down list apply/remove css class element presenting list.

i haven't verified highlight , unhighlight function chosen because i've not worked plugin before. if you'll end tweaking css class check on element see if chosen drop down or not. realize element fire validation 1 not visible. if it's not firing validation there setting in jquery validate ignore elements.

// script block should placed after jquery, jquery validate , jquery validate // unobtrusive plugins have been loaded. $(function () {     // retrieves current jquery validator form     var $validator = $("form").validate();     // we're going override default highlight method jquery when applying     // our css class error     $validator.settings.highlight = function (element, errorclass, validclass) {         var $element = $(element);         if ($element.hasclass("chosen-select")) {             // it's chosen element move next element in dom              // should container chosen.  add error class              // instead of hidden select             $element.next().addclass(errorclass).removeclass(validclass);         }         else if (element.type === "radio") {             this.findbyname(element.name).addclass(errorclass).removeclass(validclass);         } else {             $element.addclass(errorclass).removeclass(validclass);         }     };     // we're going override default unhighlight method jquery when removing     // our css class error     $validator.settings.unhighlight = function (element, errorclass, validclass) {         var $element = $(element);         if ($element.hasclass("chosen-select")) {             // it's chosen element move next element in dom              // should container chosen.  add error class              // instead of hidden select             $element.next().removeclass(errorclass).addclass(validclass);         }         else if (element.type === "radio") {             this.findbyname(element.name).removeclass(errorclass).addclass(validclass);         } else {             $element.removeclass(errorclass).addclass(validclass);         }     }; });