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?
LVL 1
maqskywalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David Johnson, CD, MVPOwnerCommented:
An autocomplete will only match what exists and your validation returns an error if the item exists so I'm confused why you want to tie them together?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.