I am looking to implement the form validator feature from Metro CSS 3 in my MVC 5 application.
Below is a snippet of my code:
@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>
}
The code snippet from Metro CSS for form input validation looks like this:
<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>
I am curious how I can incorporate @Html.LabelFor, @Html.ValidationMessageFor() in this context.