EditorFor Validation Styles

[Rachael]

I am using the Kendo.EditorFor() control to display editors as I loop through a List of objects. I have server-side validation in play and when I submit the form, it correctly identifies that the fields are not filled in. However, the appropriate classes are not added to any of the HTML elements that are returned back to the browser, and therefore there is no visual indicator of which editor(s) have not been filled in.

Here's a copy of my HTML:

    @using (Html.BeginForm("SaveSelfAssessment", "Accreditation", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(false, "The following errors occurred:", new { @class = "error_box" })
    
        <input type="hidden" id="Id" name="Id" value="@Model.Id" />
        <input type="hidden" id="StartingId" name="StartingId" value="@Model.StartingId" />
        
        for (int i=0; i<Model.ApplicationSelfAssessments.Count; i++)
        {
            @Html.HiddenFor(m => m.ApplicationSelfAssessments[i].Id)
            @Html.HiddenFor(m => m.ApplicationSelfAssessments[i].Type)

            <div class="@Model.ApplicationSelfAssessments[i].Type">
            @if (Model.ApplicationSelfAssessments[i].Type == "supplementalinformation")
            {
                <h2>Supplemental Information</h2>
            }
                @Html.Raw(Model.ApplicationSelfAssessments[i].Text)
            </div>
        
            if (Model.ApplicationSelfAssessments[i].Type == "question")
            {
                <div>@(Html.Kendo().EditorFor(m => m.ApplicationSelfAssessments[i].Answer)
                          .Encode(false)
                          .Tools(tools => tools
                                  .Clear()
                                  .Bold()
                                  .Italic()
                                  .Underline()
                                  .InsertUnorderedList()
                                  .InsertOrderedList()
                                  .Indent()
                                  .Outdent()
                            )
                        )
                </div>
            }
        }
        
        <p>
            <input type="button" class="k-button k-button-icontext" value="Previous" onclick="window.location = '@Model.PreviousUrl';" />
            <input type="submit" class="k-button k-button-icontext" value="Next" />
        </p>
    }

And my model contains the following Validate method:

        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        {
            if (Type == SelfAssessmentType.Question.ToString().ToLower() && String.IsNullOrWhiteSpace(Answer))
            {
                yield return new ValidationResult("Answer is required", new [] { "Answer" });
            }
        }

If I turn the editor into a textarea, the input-validation-error class is added to the textarea. Is there a way I can get this to work using the Kendo.EditorFor tool?

Thank you,

Rachael

[Rachael]

This isn't the most elegant answer, but I figured out a way to accomplish this:

I added the following to my <div> with the editor:

                    @Html.ValidationMessageFor(m => m.ApplicationSelfAssessments[i].Answer)

Then I added the following javascript:

    <script type="text/javascript">
        $(function() {
            $(".field-validation-error").html("");
            $(".field-validation-error").parent().find(".k-editable-area,iframe").addClass("input-validation-error");
        });
    </script>

This empties out the validation message and adds the appropriate class to the editor. Note: this only works as server-side validation, not client-side.