Is there a way to change the position of validation message

问题

Although the validation messages in my project are positioned properly (just on the right side) for Textbox, Dropdownlist, etc. one of them is positioned on the left bottom for Editor and the position cannot be changed. So, is there a way to change the position of validation message for the Editor? I just want to change position of the validation message right side to the editor while not touching the position of the other controls. Any help would be appreciated.

View:

<script type="text/javascript">
$(function () {     

    $("form").kendoValidator({
            //Hide Kendo validation message and show as tooltip
            errorTemplate: '<span class="vld vld-danger"><span class="k-icon k-warning" title="${message}"></span></span>'
        });

});
</script>


@Html.LabelFor(m => m.Summary)
@Html.TextBoxFor(m => m.Summary)
@Html.ValidationMessageFor(m => m.Summary)

@Html.LabelFor(m => m.Description, new { @class = "editor-label" })
@(Html.Kendo().EditorFor(m=>m.Description)
    .Name("Description")
    .HtmlAttributes(new { @class = "editor-field", required = "required" })           
)
@Html.ValidationMessage("Description")



<style>
/*Hide Kendo validation message and show as tooltip*/
.vld {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 20px;
    padding: 2px 5px 5px 5px;
    margin-left: 1px;
}
.vld-danger {
    background-color: #F2DEDE;
    border-color: #EED3D7;
    color: #B94A48;
}

.editor-label {
        display: block;
        float: left;
        padding: 0;
        width: 150px;
        margin: 1em 0 0 0;
        padding-right: 14px; 
    }

.editor-field {
    width: auto;
    margin: 0.5em 0 0 0;
    overflow: auto;
    min-height: 2em;
}
</style>

回答1:

You can use Adjacent sibling selector to properly position your validation message

.editor-field + span {
    // proper position
}

or even:

.editor-field + span.vld.vld-danger {
    // proper position
}

回答2:

Finally I solved the problem as indicated on BoltClock's answer.

<span class="k-editor-val-message">
@Html.LabelFor(m => m.Description, new { maxlength = 1000, @class = "editor-label" })
@(Html.Kendo().EditorFor(m => m.Description)
    .Name("Description") 
    .HtmlAttributes(new { @class = "editor-field", style = "width:660px; height:140px;", 
         required = "required", data_required_msg="Required field"  })
)
@Html.ValidationMessage("Description")
</span>


<style> 
    .k-editor-val-message > .k-invalid-msg {
        // proper position
    }
</style>

来源：https://stackoverflow.com/questions/31187973/is-there-a-way-to-change-the-position-of-validation-message