MVC3 - Firing unobtrusive JavaScript on JQuery UI Autcomplete Dropdown

Question

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 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

Sorry William - yes that is exactly the one I'm using. Thanks. — Sniffer, Sep 01 '11 at 07:25

score 0 · Answer 1 · answered Sep 01 '11 at 08:06

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
});

score 0 · Accepted Answer · edited May 23 '17 at 12:04

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.

MVC3 - Firing unobtrusive JavaScript on JQuery UI Autcomplete Dropdown

2 Answers2