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?
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.