有没有办法改变验证消息的位置 [英] 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.

查看:

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

推荐答案

最后我解决了问题，如 BoltClock 的答案.

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>

这篇关于有没有办法改变验证消息的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！