EditorFor Validation Styles

2 posts, 0 answers
  1. Rachael
    Rachael avatar
    27 posts
    Member since:
    Jul 2010

    Posted 10 Jun 2014 Link to this post

    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
  2. Rachael
    Rachael avatar
    27 posts
    Member since:
    Jul 2010

    Posted 10 Jun 2014 in reply to Rachael Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top