如何将验证消息范围包装在 div 中并根据验证呈现容器？

Question

如何在 div 中包装验证消息范围并根据验证呈现容器。

   <div id="name_validationMessage"
         class="k-widget k-tooltip k-tooltip-validation field-validation-error"
         style="margin: 0.5em;" role='alert'>
        <span class='k-icon k-warning'></span>
        @Html.ValidationMessageFor(m => m.Name)
        <div class='k-callout k-callout-n'></div>
    </div>

---

在上面HTML： div 首先显示为空背景颜色，但我想将其与验证消息范围的可见性联系起来。

Answer 1

检查 name_validationMessage 表单提交事件。 如果它有 field-validation-error class 的跨度，则显示 name_validationMessage.

    $(document).ready(function () {
        var name_validationMessage = $('#name_validationMessage');
        $('form').submit(function () {
            if (name_validationMessage.find('.field-validation-error').get().length > 0) {
                name_validationMessage.show();
            }
            else {
                name_validationMessage.hide();
            }
        });
    });