html - 在 MVC 中使用 Metro CSS 3 表单验证

Question

我想使用来自 Metro CSS 3 的表单验证器在我的 MVC 5 应用程序中。

我的代码如下:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>@WebApplication.Resources.Account.AccountRegisterPageHeader</h4>
    <hr />
    @*@Html.ValidationSummary("", new { @class = "text-danger" })*@
    <div class="form-group">
        @Html.ValidationMessageFor(model => model.FirstName)
        @Html.LabelFor(m => m.FirstName, new {@class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.FirstName, new {@class = "form-control"})
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

Metro css 中的一段代码如下所示:

<div class="input-control text">
    <input
        data-validate-func="minlength"
        data-validate-arg="6"
        data-validate-hint="This field must contains min 6 symbols!"
        type="text">
    <span class="input-state-error mif-warning"></span>
    <span class="input-state-success mif-checkmark"></span>
</div>

如何使用 @Html.LabelFor、@Html.ValidationMessageFor() 等？

Answer 1

<form data-role="validator" data-hint-mode="hint" data-hint-easing="easeOutBounce">

            <div class="row cells2 ">
                <div class="cell">

                        <label class="block">Min length control (hint)</label>
                          <div class="input-control text">
                              @Html.TextBoxFor(model => model.Title,new {data_validate_func="minlength",data_validate_arg="30", data_validate_hint="Min length 6 sym !" ,data_validate_hint_position="left"})
                              @*<input type="text" data-validate-func="minlength" data-validate-arg="6" data-validate-hint="Min length 6 sym !" data-validate-hint-position="top">*@
                              <span class="input-state-error mif-warning"></span>
                              <span class="input-state-success mif-checkmark"></span>
                          </div>
                        <div>
                            <input type="submit"/>
                        </div>




                </div>