Validation - Highlight Field Red OnError

[lmf232s]

I have the combo boxes all hooked up and noticed that when there are client side errors the combo boxes do not get highlighted in red like other fields on the form. Looking over the examples it seems that you put a <div class="error"> on the page and the error message will render in this tag.

I would actually like to see if there is a way to get the combo boxes to display errors like the other elements on the page. Is it possible to get the combo box to turn red when a client side error is thrown?

Thanks

[Terry Burns-Dyson]

I think this is related, so I'll add to this post. 

When I add a required attribute to a field I have a combobox attached to, then I don't get client validation, yet I do on textboxes. The combobox is using client side binding for it's data, but I am using ComboBoxFor. I've confirmed that I get client validation for two textboxes, but it goes back to the server before validating the combobox value.

[MGrassman]

Anyway to handle this Telerik team?

[Georgi Krustev]

Hello,

 
There were some issues related with client validation in version 2010.3.1110 of Telerik Components for ASP.NET MVC. I will suggest you upgrade to SP1 of Q3 release - version 2010.3.1318.

For your convenience I have attached a simple test project, which implements required functionality.

Greetings,
Georgi Krustev
the Telerik team

[Sydney]

I am using the latest (recommended) version but still have this problem, albeit w/Autocomplete, not ComboBox.  I am using jquery.validate.js and MicrosoftMvcJqueryValidation but not unobtrusive.  Would that make a difference?

Update:  If I manually trigger form validation on the client side ($("#myform").validate()) it works properly, but if it has to make a round trip to the server, the highlighting is lost.

[Sydney]

I just downloaded and ran the sample code, and it explicitly does NOT implement the functionality of highlighting the ComboBox with a red background like other controls.   It displays a message in red, but I don't think that's what we're after here.  I've attached a screen shot.

In addition, the expected behavior (the error message and highlighting go away as soon as the field is updated) does not occur.

[Matt]

Hi,

I implemented my own extension method that manually checks the ModelState for any errors and applies the default CSS Error validation class to the field if required

public static MvcHtmlString ComboListFor<TModel, TProperty>(this HtmlHelper<TModel> helper, System.Linq.Expressions.Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> list, string className)
{
    var result = string.Empty;

    var inputName = ExpressionHelper.GetExpressionText(expression);
    var name = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(inputName);
    var val = ModelMetadata.FromLambdaExpression(expression, helper.ViewData).Model;

    if (helper.ViewData.ModelState[name] != null && helper.ViewData.ModelState[name].Errors.Count > 0)
        className =  string.Format("{0} input-validation-error", className);

    var combo = helper.Telerik().ComboBoxFor(expression).Filterable(
        filtering => filtering.FilterMode(AutoCompleteFilterMode.Contains)).HighlightFirstMatch(
            true);

    if (list != null)
    {
        combo.BindTo(list).AutoFill(true);
    }

    if(!string.IsNullOrEmpty(className)) combo.HtmlAttributes(new {@class = className.Trim()});
    result += combo.ToString();

    return MvcHtmlString.Create(result);
}

FYI - Might not compile as I had to quickly modify it as I had other custom processing in the extension method, but you will get the idea.

Cheers