有没有办法来改变验证消息的位置 [英] Is there a way to change the position of validation message

问题描述

虽然在我的项目验证消息的文本框，DROPDOWNLIST等其中之一是位于左侧底部位置正确（只是在右侧）的编辑和位置不能改变。那么，有没有一种方法来改变验证消息的编辑器的位置？我只是想改变验证消息右侧的位置给编辑，同时不接触其他控件的位置。任何帮助将是AP preciated。

查看：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{    $（形式）。kendoValidator（{
            //隐藏剑道验证消息，并显示为工具提示
            errorTemplate：'＆LT;跨度类=VLD VLD-危险＆GT;＆LT;跨度类=K-图标K-警告称号=$ {消息}＆GT;＆LT; / SPAN＆GT;＆LT; / SPAN＆GT;'
        }）;}）;
＆LT; / SCRIPT＆GT;
@ Html.LabelFor（M = GT; m.Summary）
@ Html.TextBoxFor（M = GT; m.Summary）
@ Html.ValidationMessageFor（M = GT; m.Summary）@ Html.LabelFor（M = GT; m.Description，新{@class =编辑标签}）
。@（Html.Kendo（）EditorFor（M =＆GT; m.Description）
    。名称（说明）
    .HtmlAttributes（新{@class =主编场，需要=需要}）
）
@ Html.ValidationMessage（说明）＆LT;风格＆GT;
/ *隐藏剑道验证消息，并显示为工具提示* /
.VLD {
    边框：1px的固体RGBA（0，0，0，0）;
    边界半径：4PX递四方4PX 4PX;
    保证金底：20像素;
    填充：2px的5像素5像素为5px;
    保证金左：1px的;
}
.VLD-危险{
    背景颜色：＃F2DEDE;
    边框颜色：＃EED3D7;
    颜色：＃B94A48;
}。编辑标签{
        显示：块;
        浮动：左;
        填充：0;
        宽度：150像素;
        保证金：1EM 0 0 0;
        填充右：14px的;
    }。编辑场{
    宽度：汽车;
    保证金：0.5em 0 0 0;
    溢出：汽车;
    最小高度：2em的;
}
＆LT; /风格＆GT;
 

解决方案

我终于解决了这个问题上的BoltClock's回答。

 ＆LT;跨度类=K-编辑-VAL-消息＆GT;
@ Html.LabelFor（M = GT; m.Description，新{最大长度= 1000，@class =编辑标签}）
。@（Html.Kendo（）EditorFor（M =＆GT; m.Description）
    。名称（说明）
    .HtmlAttributes（新{@class =主编场，风格=WIDTH：660px;高度：140px;，
         所需=必需的，data_required_msg =必填字段}）
）
@ Html.ValidationMessage（说明）
＆LT; / SPAN＆GT;
＆LT;风格＆GT;
    .K-编辑-VAL-消息＆GT; .K-无效，味精{
        //适当的位置
    }
＆LT; /风格＆GT;
 

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>

解决方案

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