更改 Kendo UI 验证器的位置

Question

我曾尝试更改 Kendo UI Validator 在我的项目中的位置，但更改了相关 kendo css 文件中相关属性的值（即显示：内联块；）还没有解决问题。那么，如何将控件的位置从下移到右，如图所示呢？预先感谢您的考虑。

Html 视图（呈现）：

<label for="Name">Name</label>

<span class="k-widget k-numerictextbox"><span class="k-numeric-wrap k-expand-padding k-state-disabled">
<input type="text" value="" name="Name" maxlength="30" id="Name" data-val-required="Required field" 
data-val-regex-pattern="^[a-zA-Z \.X]+$" data-val-regex="Please check the value" data-val-maxlength-max="25" 
data-val-maxlength="The field Name must be a string or array type with a maximum length of '25'." data-val="true" 
class="letters_onlyk-formatted-value k-input"></span><span data-valmsg-replace="true" data-valmsg-for="Name" 
class="field-validation-valid"></span></span>

<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" data-for="Name" 
data-valmsg-for="Name" id="Name_validationMessage" role="alert"><span class="k-icon k-warning"> </span>Required field</span>

Css:

.k-widget.k-tooltip-validation {
    background-color: #FFF4C9;
    border-color: #FFE79E;
    color: #635145;
}

span.k-tooltip {
    border-width: 1px;
    display: inline-block;
    padding: 2px 5px 1px 6px;
    position: static;
}

.k-tooltip {
    background-repeat: repeat-x;
    border-style: solid;
    border-width: 1px;
    min-width: 20px;
    padding: 4px 5px 4px 6px;
    position: absolute;
    text-align: center;
    z-index: 12000;
}

查看（剃须刀）：

@using (Html.BeginForm("Create", "Multiplier", FormMethod.Post,
new { id = "addForm", enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()

    <div class="container">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <fieldset>
            <legend>Person</legend>
            <section>
                <div class="legend-left">

                    @Html.ValidationMessageFor(model => model.Term)
                    <br />
                    @Html.LabelFor(m => m.Name)
                    @Html.Kendo().TextBoxFor(m => m.WhoIsOnline)
                    <br />
                    //... deleted for brevity
                </div>
            </section>
        </fieldset>  

            @(Html.Kendo().Button()
                .Name("submitbtn")
                .HtmlAttributes(new { type = "submit", @class = "k-primary k-button k-button-icontext" })
                .Content("Save")
            )
    </div>
}

更新：

应用“@Html.ValidationMessageFor”后，验证消息如下所示：

Answer 1

诀窍是将 ValidationMessageFor 放在 TextBoxFor 之后。您的代码应如下所示：

@Html.LabelFor(m => m.Name)
@Html.Kendo().TextBoxFor(m => m.WhoIsOnline)
@Html.ValidationMessageFor(model => model.Term)

在css中不改变位置或显示属性，只改变颜色

别忘了：

<script>
  $(document).ready(function() {
    $("form").kendoValidator()
  });
</script>

如果您想要自定义模板：

<script>
  $(document).ready(function() {
    $("form").kendoValidator(
    {
        errorTemplate: "<span class='required'>#=message#</span>"
    });
</script>

更多信息： http://docs.telerik.com/kendo-ui/aspnet-mvc/validation

更改 Kendo UI 验证器的位置

Changing the position of Kendo UI Validator

css

asp.net-mvc

kendo-ui

kendo-asp.net-mvc

kendo-validator