asp.net-mvc - 有没有办法改变验证消息的位置

Question

虽然我的项目中的文本框、下拉列表等验证消息的位置正确(就在右侧)，但其中一个位于编辑器的左下角，并且该位置不能改变了。那么，有没有办法改变编辑器验证消息的位置呢？我只想将验证消息右侧的位置更改为编辑器，而不触及其他控件的位置。任何帮助将不胜感激。

查看:

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

Answer 1

您可以使用Adjacent sibling selector正确定位您的验证消息

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

甚至:

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