MVC3 - Firing unobtrusive JavaScript on JQuery UI Autcomplete Dropdown

combox I'm using unobtrusive validation in an MVC3 app. I've got a dropdown list with a [Required] validator on it. This is my Model (simplified):

[Required(ErrorMessage = "Please select From Employee.")]
public string CurrentEmpId { get; set; }       

public List<SelectListItem> CurrentEmp { get; set; }

And this is my View (simplified):

@Html.LabelFor(m => m.CurrentAdvisers)
@Html.DropDownListFor(m => m.CurrentEmpId, new SelectList(Model.CurrentEmp, "Value", "Text", Model.CurrentEmpId), "Please Select")
@Html.ValidationMessageFor(m => m.CurrentEmpId)

Now this 开发者_JAVA百科is all working bo diddly until I make the dropdown list into a JQuery UI combox jqueryui.com/demos/autocomplete/#combobox (see last argument).

@Html.DropDownListFor(m => m.CurrentEmpId, new SelectList(Model.CurrentEmp, "Value", "Text", Model.CurrentEmpId), "Please Select", new { @class = "selAutoComplete" })

The validation fires OK when I press a submit button and nothing has been selected. There is one annoying thing that doesn't work though. When an error is fired, if I then go and correct the error by selecting something in the dropdown and tab out the error doesn't disappear. This did happen when it was a normal select box.

It's probably to do with the fact that the <select> is now hidden and replaced by an <input> by JQuery, but I can't figure out how to fire the correct js to remove the error message.

Any help will be gratefully received!

Thanks in advance

From your description, it seems that validation of the select control did not get triggered when you tabbed out of the jQ-UI combobox. One thing you could try is to force a blur or change event on the select control right after you tab away from the combobox, e.g.:

$('#CurrentEmpId').next('input').blur(function(e) {
    $('#CurrentEmpId').change();
    //$('#CurrentEmpId').blur();    // try this line if the above does not work
});

After some further research I've found the following solution works just fine:

How to use jQuery to remotely validate a field that depends on another field in the form?

$("select.selAutoComplete").change(function() {
    $(this).removeData("previousValue"); //clear cache when changing group
    $("form").data('validator').element('select.selAutoComplete');
});

@William Niu - I tried your solution and off the top of my head, I couldn't see why this didn't work. Thanks for taking the time to answer though.

I hope this helps others.