How to wrap the validation message span in div and render the container based on the validation?

Question

How to wrap the validation message span in div and render the container based on the validation.

   <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>

---

In the Above HTML: The div appear in the first place as empty with background color but I want to tie it with the visibility of the validation message span.

Answer 1

check name_validationMessage on form submit event. if it has a span with field-validation-error class, show 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();
            }
        });
    });