Problem MVC 3 Validation of Telerik ComboBoxFor control

[Jaime]

I am using data annotations to decorate my view models like below

 /// <summary>
        /// Returns the label for Region
        /// </summary>
        public string LabelForRegion { get; set; }

        /// <summary>
        /// ID Of Region/State
        /// </summary>
        [RequiredValue]
        public string Region { get; set; }

        /// <summary>
        /// Regions
        /// </summary>
        public IEnumerable<SelectListItem> Regions { get; set; }


I am using the Telerik ComboBoxFor control to display a list of regions which display without any problems

<div class="editor-label">
            <%: Html.Label(Model.LabelForRegion)%>
        </div>
        <div class="editor-field">
            <%= Html.Telerik().ComboBoxFor(x => x.Region)
                        .DataBinding(binding => binding.Ajax().Select("LoadRegions", "Region"))
                        .AutoFill(true)
                        .Filterable(filtering => filtering.FilterMode(AutoCompleteFilterMode.StartsWith))
            %>
            <%: Html.ValidationMessageFor(m => m.Region) %>
        </div>

The resulting HTML looks as below

<div class="editor-label">
            <label for="Address.State">State</label>
        </div>
        <div class="editor-field">
            <div class="t-widget t-combobox t-header" id="Address_Region"><div class="t-dropdown-wrap t-state-default"><input class="t-input" id="Address_Region-input" name="Address.Region-input" type="text" /><span class="t-select t-header"><span class="t-icon t-arrow-down">select</span></span></div><input id="Address_Region-value" name="Address.Region" style="display:none" type="text" /></div>
            <span class="field-validation-valid" data-valmsg-for="Address.Region" data-valmsg-replace="true"></span>

        </div>

The <span class="field-validation-valid" should be validating the Telerik ComboxFor control but it does not. The  data-valmsg-for="Address.Region" should hook the validation to the Telerik ComboxFor control. It appears the Telerik Control appends "-input" to the name causing validation to fail.

<input class="t-input" id="Address_Region-input" name="Address.Region-input"

Any ideas on how to hook in the mvc 3 validation to the Telerik ComboBoxFor control?

Thank you

[Robert]

Did you ever get this resolved? I have the same problem.

[Daniel]

Hi,

The ComboBox uses two input fields - one for the displayed text and a hidden one that holds the selected value, which at least in the generated HTML you sent is missing the validation attributes:

<input id="Address_Region-value" name="Address.Region" style="display:none" type="text" />

Is the ComboBox used in a Form context? Are you using the Required attribute or a custom validation attribute?


Regards,
Daniel
the Telerik team

[Robert]

I am using the [Required] attribute on mine and am using it within a form.

[Daniel]

Hi again,
 
I am still unable to reproduce the problem locally. I am attaching my test project. Could you check it and tell me if I am missing something? If yes, please modify the project and send it back so I can check the setup.

Regards,
Daniel
the Telerik team

[Mike]

I am having the same problem. The server side validation is happening - I added a custom error message on the [Required] attribute on the property in the View Model that does display when server validation is performed. I have a number of fields on the form, and the only one that does not validate client side is the ComboBoxFor. The others are all @Html.EditorFor controls. 

I used Firebug to remove the -input suffix from the id and name attributes of the control, but that did not make any difference in the validation behavior. It still doesn't happen until posting to the server.

Is there something about the jQuery validation that is missing? The MVC 3 controls automatically wire up to jQuery validation. Do we need to add something to get the telerik control to also do this?

[Mike]

One more thing, Daniel's project uses the aspx view engine. I added a simple action to accept the post from the view:

[HttpPost]
public ActionResult Index(RegionsViewModel r)
{
    return View(r);
}

Setting a breakpoint in this method and running in debug mode verifies that the validation indeed occurs on the client side - never entered the method until an item in the combobox was selected..

Then I created a new project using razor. I copied the  model and controller from the original and made an equivalent view:

@model ComboBoxForValidation.Models.RegionsViewModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>RegionsViewModel</legend>

        <div class="editor-field">
            @Html.Telerik().ComboBoxFor(x => x.Region).DataBinding(binding => binding.Ajax().Select("LoadRegions", "Home")).AutoFill(true).Filterable(filtering => filtering.FilterMode(AutoCompleteFilterMode.StartsWith))
            @Html.ValidationMessageFor(model => model.Region)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

This one posts back to the controller which goes back to the view and displays the error message.- no client validation. So this suggests maybe its got something to do with razor -- but that was not the case for Jaime. 

I also wondered if it was because my original project was not created as a Telerik MVC 3, but rather converted an ASP.NET MVC 3 over to Telerik. But this latest experiment was created as Telerik and still doesn't client validate -- I manually added the jquery.validate.js files to the _Layout.cshtml too but that didn't help either.

Running out of things to try...

[Phong]

does this ever resolved? I am facing the same issue

Thanks

[Peter]

Hi, 

Just seeing if there is any solution to this problem? 

My combo box doesn't have the data-val or data-val-required attribute attached to it? 

Thanks 

Peter

[sta]

HI Daniel,

Your project is working al right. But too many people having the same issue (including myself).
Can you please send the same project you attached previously made with razor?
I understand that there's no big difference and there's tool to convert aspx into schtml. I used that tool to convert your project to razor and it doesn't work anymore. 
As a matter of fact I haven't seen one example (and I am looking last 3 days) with ComboBoxFor validation working in razor view engine (completely, I did found ascx Editor Template used in razor, but never complete razor solution).
Just in case, I converted your project ComboBoxForValidation to razor, its attached and it doesn't show any signs of client validation 
working.
Thank you in advance!

[Daniel]

Hi,

The validation is not working because the needed scripts aren't include in the Razor Layout. I attached the project with the necessary modifications added.

Regards,
Daniel
the Telerik team

[sta]

Daniel,
Got it working. Thank you very much!

[Mike]

Thanks Daniel, this works!

Now how to add the necessary script(s) to my existing Razor project? Just copying the 2011.1.315 folder doesn't make any difference - still no client side validation. Looks like I need more retrofitting to get this in an existing Razor project.

[sta]

Mike,
you need to copy 2011.1.315 under scripts and have this folder included into the project.
Also you need to use <script scr = yada yada yada 
for 

• jquery
• jquery.validate
• jquery.validate.unobtrusive

precisely like Daniel in the attached project (_Layout)

Don't forget to include Telerik().ScriptRegistrar() and Telerik().StyleSheetRegistrar() into _Layout the same way Daniel does.

Hope this helps.