如何将验证消息跨度包装在 div 中并根据验证呈现容器？答案

【问题标题】：How to wrap the validation message span in div and render the container based on the validation?如何将验证消息跨度包装在 div 中并根据验证呈现容器？
【发布时间】：2019-03-12 00:29:09
【问题描述】：

如何将验证消息 span 包装在 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 首先显示为空，带有背景色，但我想将其与验证消息范围的可见性联系起来。

【问题讨论】：

标签： html css asp.net-mvc telerik kendo-asp.net-mvc

【解决方案1】：

在表单提交事件中检查name_validationMessage。如果它具有field-validation-error 类的跨度，则显示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();
            }
        });
    });

【讨论】：