This is a migrated thread and some comments may be shown as answers.

EditorFor Validation Styles

1 Answer 358 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Rachael
Top achievements
Rank 1
Rachael asked on 10 Jun 2014, 04:35 PM
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

1 Answer, 1 is accepted

Sort by
0
Rachael
Top achievements
Rank 1
answered on 10 Jun 2014, 06:41 PM
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.
Tags
Editor
Asked by
Rachael
Top achievements
Rank 1
Answers by
Rachael
Top achievements
Rank 1
Share this question
or