Hey,

 

I am using jquery mobile for ASP.NET MVC4 application. Validations are performed using jquery validate and unobtrusive js. During client side validation the selected value displayed in the drop down disappears in the following scenario.Attached screen shot for reference.

 

ScreenShot1: Validation without entering data.

ScreenShot2: Validation after selecting a value in drop down. Problem is Drop down text is invisible.

 

 Following is the html the class="input-validation-error" style="display: none; " is applied to the span that displays text on the drop down, this is not correct.

 

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text"><span class="input-validation-error" style="display: none; ">Sick</span></span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span></span><select id="Service" name="Service" data-val="true" data-val-required="*This field is required" class="valid"> <option value="">Select a Reason</option> <option value="Sick">Sick</option> <option value="Emergency">Emergency</option> </select></div>

Thanks