JQuery UI Autocomplete and MVC3 Remote Validation Conflict

On a recent project I had a great deal of trouble to get JQuery UI Autocomplete and ASP.Net MVC3 Remote Validation to play nicely with each other. The goal was to have a type-in for selecting a city for a search in which the pull-down would auto-complete based on the available cities in the database:

Once a city is selected from the autocomplete it should do a validation as to whether the city is populated with actual data in the database (in case the user types in an invalid city:

This is accomplished using the MVC 3 remote validation which makes it easy to do by adding an annotation to the ViewModel to indicate that the attribute will be remotely validated:

public class SearchFormViewModel {
    ...
    [Remote("IsCityAvailable","Listings",ErrorMessage="Selected city has no listings, please reselect.")]
    public string City { get; set; }
}

This of course requires an “IsCityAvailable” action on the “Listings” controller that will return false if there are no database entries for the given city:

    //Check that a city exists on the search selector.
    public JsonResult IsCityAvailable(string city) {
            City findCity = cityRepository.FindByCityName(city);
            if (findCity == null) {
                return Json(false, JsonRequestBehavior.AllowGet);
            } else {
                return Json(true, JsonRequestBehavior.AllowGet);
            }
     }

Conflict with Autocomplete

The problem comes in when the user types in a part of the city name and then selects from the drop-down autocomplete, it causes the remote validation to fire but it only includes the text that was typed, e.g. “A” rather than the selected drop-down text.  This causes the validation to fail when it should indicate success.

This has to do with the way the JQuery validation fires based on key-up and blur events. Researching the web shows that there are ways to turn this part off, but it is complicated by the layer that MVC3 puts on top of the JQuery validation.

Solution

The solution was to add some Javascript to the partial view that defined the search inputs so that the “onkeyup” and “onfocusout” settings are set to false. This is done in the “window.onload” so that it they are turned off early enough in the process:

<script type="text/javascript">
    window.onload = function () {
        var validatorSettings = $('#searchForm').validate().settings;
        validatorSettings.onkeyup = false;
        validatorSettings.onfocusout = false;
    }
</script>

Then a JQuery handler is added to the Search button click event so that the validate is forced when the search button is pressed (also works when the form is submitted via a return):

$("#searchSubmit").click(function (event) {
    $("#searchForm").validate().element("input#City");
});

3 thoughts on “JQuery UI Autocomplete and MVC3 Remote Validation Conflict”

I am using the above structure to validate username,, but i am facing a problem for ,, The controller what i am using in Remote(“controllerName”,”FucntionName”) is not called at all.
I am also using the Following Jquery

jquery-1.4.4.min.js
jquery.validate.min.js
jquery.validate.unobtrusive.min.js

But i am facing the above said problem,
pls help me

@Raghu,
Sometimes it is useful to debug using FireBug on FireFox so you can trace what is going on with the JavaScript/JQuery as there may be a problem there. Also, please refer to the post by Dean Hume as it has some guidance more specific to what you are trying to do: MVC3 And Remote Validation.

Finally a solution that really works. God bless you!