xVal to Force a field into error state

Question

I have a jQuery autocomplete fild which gets existing data from my MVC action. I want to ensure that the data entered into the field DOES NOT already exist on the database.

I had thisworkig using .result and .change on the autocomplete to set the field to class = "input-validation-error". When I added xVal client validation this still works but xVal seems to clear the css class so now the field entry goes red briefly and then returns to clear background.

Rather than try to change xVal code I would rather get xVal client validation to display the field in an error state as for normal client data validation errors.

How would I do this? What code can I use in the autocomplete .result event to force the error state in xVal?

Update: I tried the idea from Wyatt Barnett but as you can see from my comments its not what I want. Here is the code of what I have:

The field markup:

            <p>
                <%= Html.LocalisedLabel("ProjectId") %>
                <%= Html.TextBox("project.ProjectId") %>
                <%= Html.ValidationMessage("project.ProjectId", "*") %>
            </p>

The xVal markup:

       <%= Html.ClientSideValidation<ProjectBO>("project").UseValidationSummary("myValidationSummary") %>
             <%= Html.ClientSideValidation<ProjectBO>("project").AddRule("ProjectId", new RemoteRule(Url.Action("ValidateProjectIdCreate", "LookUp", new { projectId = Model.ProjectId})))%>

The javascript markup for autocomplete:

<script type="text/javascript">

    $(document).ready(function() {
        $('#project_ProjectId').autocomplete('<%= Url.Action("ProjectIdList", "LookUp") %>',
{
    delay: 10,
    minChars: 1,
    matchCase: 0,
    matchSubset: 1,
    autoFill: false,
    maxItemsToShow: 10,
    cacheLength: 10
}
);

        $('#project_ProjectId').result(function(item) {
            if (item) {
                //match
                $('#project_ProjectId').attr("class", "input-validation-error");
            }
            else {
                $('#project_ProjectId').removeAttr("class");
            }
        });
        $('#project_ProjectId').change(function() {
            $('#project_ProjectId').attr("class", "");
        });
    });
</script>

This script gives me the event to handle but what can I put in it?

Answer 1

Why not upgrade to xVal 1.0 and take advantage of it's ajax validation toys? That way you won't have to fight the framework on this.

---

Ok, since that angle won't work, perhaps you can use the autocomplete.result combined with the jquery validation API (xVal also rides this) to handle things.

Answer 2

Finally got it worked out.

I used the jQuery autocomplete on the input field to provide some guidance to the user by displaying a look-up list of EXISTING database entries.

On exit from the field by either selecting a displayed list item from autocomplete or by typing a non-existing database entry the xVal RemoteValidator fires to either set the validation failure condition or clear it.

Code is as follows:

       <%= Html.ClientSideValidation<ProjectBO>("project").UseValidationSummary("myValidationSummary"

.AddRule("ProjectId", new RemoteRule(Url.Action("ValidateProjectIdCreate", "LookUp")))%>

autocomplete script is as folows:

<script type="text/javascript">
    $(document).ready(function() {
        $('#project_ProjectId').autocomplete('<%= Url.Action("ProjectIdList", "LookUp") %>',
            {
                delay: 10,
                minChars: 1,
                matchCase: 0,
                matchSubset: 1,
                autoFill: false,
                maxItemsToShow: 10,
                cacheLength: 10
             }
          );
    });
</script>

I then removed the autocomplete.result and .change events in the previous code in the question.

Works well.