Solved: apppling validation to autocomplete

Hi experts,

I have a asp.net mvc5 application. Using C#, Razor, Entity Framework 6 Database model.

I have a form page called Create.cshtml:

My code looks like this:

@model MVCDemo.Models.User

@{
    ViewBag.Title = "Create";
}

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>User</h4>
            <hr />
            @Html.ValidationSummary(true)
            <div class="form-group">
                @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.FullName)
                    @Html.ValidationMessageFor(model => model.FullName)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.UserName)
                    @Html.ValidationMessageFor(model => model.UserName)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Password)
                    @Html.ValidationMessageFor(model => model.Password)
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
</body>
</html>

Open in new window

So in my form I have a textbox where I type in username.
The snippet from my page above that i'm talking about is this snippet:

<div class="form-group">
@Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>
</div>

So right now on my form when I type a username in this text box. I have set up remote validation on this textbox.
So when this @Html.ValidationMessageFor(model => model.UserName) validation runs after I type in a user name, the validation checks my sql server table for that column. If the same username already exists in my table then the a message that says "user already exists" appears on my page in red font , right next to this textbox.

So my validation on this textbox works just fine.

So here is my question.

I want to replace this username textbox with a Telerik UI for ASP.NET MVC AutoComplete control.
This is the autocomplete I'm talking about: http://demos.telerik.com/aspnet-mvc/autocomplete/virtualization

So on my page I'm going to replace this:

@Html.EditorFor(model => model.UserName)

with something like this:

@(Html.Kendo().AutoComplete()
.Name("UsersAC")
.DataTextField("UserName")
.MinLength(3)
.HtmlAttributes(new { style = "width:450px" })
.Placeholder("Type a ship name")
.Template("#= OrderID # | For: #= ShipName #, #= ShipCountry #")
.DataSource(source => {
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
.Transport(transport =>
{
transport.Read("Virtualization_Read", "AutoComplete");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
})
.Virtual(true)
)

So if I replace my textbox with this autocomplete does anyone know how I apply this validation @Html.ValidationMessageFor(model => model.UserName) to my autocomplete?