jQuery Forum

After struggling a bit with getting this working...I figured I would share my findings.

I have a dynamic form with an arbitrary number of textboxes, dropdowns , and radio fields. The jquery selectmenu ui is applied to my dropdowns. "Required" validation needs to be applied to all textboxes and dropdowns. The first item in the dropdown has a blank value. When validation fails, a message should appear below the field and the field itself should highlight red. The error class applied is not he default "error". It is instead, "input-validation-error". On top of the highlight, a message should be displayed below the drop-down. So the question is, how do we wire up the selectmenu fields with validation? Below is the answer.

First, the "required" class must be applied to the select element:

2.  <select name="ddl_3" id="ddl_3" class="required">
3.        <option value="">-- select option --</option>
4.        <option value="1">Options 1</option>
5.        <option value="2">Options 2</option>
6. </select>
8. <div class="clear"></div>
9. <span errorfor="ddl_3"></span>

Second, since the selectmenu widget actually hides the select element and generates div span and anchor elements that make up the fancy looking drop-down, we need to tell the validation object that we should include hidden elements in its collection of elements to validate. We do this by adding the ignore option to the validate object with a value of "". I can't take credit for finding this....https://github.com/fnagel/jquery-ui/issues/195

Third, if validation fails, we need to highlight the selectmenu. To do so, we need to use the invalidHandler option of validate. In this event, we will loop through each item in the errorList and find the ones that have a "nodeName" of 'select' and add the "input-validation-error" class to the next div sibling. See code at the bottom.

Fourth, we need remove or add the "input-validation-error" class from the div sibling and revalidate the field when the user changes the value. We do this with $.change event handler. Again see code below.

I hope this helps some people.