Autocomplete with validation

[Niladri]

Hi,
I am using Telerik Autocomplete control with razor engin. I watn validation on Autocomplete field. How it would be possible? I did as:
  @(Html.Telerik().AutoCompleteFor(m => m.JobTitleDescription)                                                             
                                        .BindTo(ViewData["lstResearchCoverage"] as List<string>)                                        
                                        .HighlightFirstMatch(true)
                                        .AutoFill(true)
                                        .HtmlAttributes(new { @class = "tbox readonly" })
                                    )      

@Html.ValidationMessageFor(m => m.JobTitleDescription)

But it doesn't fire validation for telerik control.

What to do ?

[Craig]

I am having the same issue.  The client side validation is not working for my control.

@(Html.Telerik().AutoCompleteFor(model=>model.Telephone.
.HtmlAttributes(new { style = "width: 196px; float: left; margin-bottom: 30px;"
.Encode(
.DataBinding(dataBinding=>dataBinding.Ajax().Select("FindTelephone", "Telephone"))

@Html.ValidationMessageFor(model=>model.Telephone.Number)

Does anybody have any ideas?  This control is inside a modal window, and I'd much prefer to have client side validation over server side validation so I do not have to remember state.

[Atanas Korchev]

Hi,

 The provided code is not sufficient to tell what the problem is. Could you send us a sample project demonstrating the issue?

Regards,
Atanas Korchev
the Telerik team

[Craig]

I can't send the whole project over, but here's the whole page that is having the problem.

If I have a simple @Html.EditorFor(model=>model.Telephone.Number) then client side validation works just fine.

However, @Html.Telerik.AutoCompleteFor(model=>model.Telephone.Number) does not trigger client side validation if no value is entered for the Telephone.Number field.

Here's the cshtml

@model PNC.Multifamily.Credits.WebApp.Models.TelephoneViewModel
@{
    Layout = null;
    Html.EnableClientValidation();
}
<!-- The folling links are required for AutoComplete -->
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
@(Html.Telerik().StyleSheetRegistrar()
                      .DefaultGroup(group => group
                          .Add("telerik.common.css")
                          .Combined(true)
                          .Compress(true))
                     )
@(Html.Telerik().ScriptRegistrar()
                     .DefaultGroup(group => group
                        .Add("jquery-1.5.1.min.js")             //Common
                        .Add("telerik.common.min.js")           //Common
                        .Add("telerik.list.min.js")             //Common
                        .Add("telerik.autocomplete.min.js")     //Autocomplete
                        .Add("telerik.window.min.js")             //Editor
                        .Add("telerik.editor.min.js")             //
                        .Add("telerik.imagebrowser.min.js")             //Editor
                        .Add("telerik.upload.min.js")             //Editor

                         .Compress(false))

    )
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{

    <br />

    <table class="align">
        <tr>
            <td>
                <label>
                    Phone Type</label>
            </td>
            <td>
                @Html.DropDownListFor(model => model.Telephone.TelephoneTypeTelephoneTypeID, new SelectList(Model.TelephoneTypes, "TelephoneTypeID", "Name", Model.TelephoneTypes[0]))
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    Test</label>
            </td>
            <td>
                @Html.EditorFor(model => model.Telephone.Number)
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    Phone Number</label>
            </td>
            <td>
                @(Html.Telerik().AutoCompleteFor(model => model.Telephone.Number)
                          .Encode(false)
                          .DataBinding(dataBinding => dataBinding.Ajax().Select("FindTelephone", "Telephone"))
        )
                @Html.ValidationMessageFor(model => model.Telephone.Number)
            </td>
        </tr>
        <tr>
            <td>
                Extension
            </td>
            <td>@Html.EditorFor(model => model.Telephone.Extension, new { style = "width:100px;" })
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    Primary Phone</label>
            </td>
            <td>@Html.CheckBoxFor(model => model.IsPrimary)
            </td>
        </tr>
        <tr>
            <td>
                <label id="showNotes">
                    Add Note</label>
            </td>
            <td>
            </td>
        </tr>
    </table>
    @Html.HiddenFor(model => Model.EntityID)


    <div id="NotesArea">
        @(Html.Telerik().EditorFor(model => model.TelephoneNote.Description)
                            .Name("Description")
                            .Tools(tools => tools
                                .Clear()
                                .Bold()
                                .Italic()
                                .Underline()
                                .Strikethrough()
                                .BackColor()
                                .FontColor()
                                .JustifyLeft()
                                .JustifyCenter()
                                .JustifyRight()
                                .InsertUnorderedList()
                                .InsertUnorderedList()
                                .CreateLink()
                                .InsertImage()
                                )
            .HtmlAttributes(new { style = "float: left; width: 345px;" })

                    )
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>

}
<script type="text/javascript">
    $(document).ready(function () {
        $("#NotesArea").hide();
    });

    $('#showNotes').click(function () {
        $(".t-window-content").css("height", "auto").css("width", "auto");
        $("#NotesArea").toggle(400);
    });


</script>

[Georgi Krustev]

Hello Craig,

 
Thank you for the posted code snippet.

I have created a simple test project in my attempt to reproduce depicted issue, but to no avail. For your convenience I have attached it to this message. Check it and let me know if I can be of a further help.

Kind regards,
Georgi Krustev
the Telerik team