Question

I’m attempting to implement a simple client side validation in a web app I’m working on, and the actual validation message is working. However, when I correct the incorrect input and the control loses focus, the validation message doesn’t clear and the invalid class remains on the control. Here’s the relevant view code

@model Project.CommentViewModel

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true);

    <div class="Comment">
        <div class="CommentInfo">
            Post New Comment:
        </div>
        <div class="CommentText">
            <div class="commentEdit ">
                @Html.TextAreaFor(x => x.CommentText, new { @class = "NewCommentTextBox" })
                @Html.ValidationMessageFor(x => x.CommentText)
            </div>
            @Html.HiddenFor(x => x.ProjectID)
        </div>
     </div>
}

And the view model attribute

[StringLength(50)]
public string CommentText { get; set; }

As I mentioned earlier, once the comment gets too long and the control loses focus, the error message comes up as expected. When the error is fixed however, the error message doesn’t disappear and the control stays red. My _Layout page has the relevant script files included in the right order, and my config file has the appSetting variables set correctly. Any idea what’s wrong or where I should be looking for the problem at? Thanks very much for any advice.

Answer 1

Resolved the problem. A Telerik grid that was present elsewhere on the page seems to have been conflicting with the validation somehow and broke it. Manually registering the jquery validation scripts with the grid resolved the issue.

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group =>                   
                group.Add("jquery.validate.js").Add("jquery.validate.unobtrusive.js")))

I think they may have resolved this particular issue with a newer version of the Telerik library.