我正在尝试使用ValidationMessageFor
验证字段,并且如果您使用Html.Beginform
提交表单,一切都可以正常工作,但是如果我使用AJAX查询,则验证将不再起作用。
我的密码
查看:
@model AutoStore.Domain.Core.Client
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.input-group-text {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.form-control {
border-radius: 30px;
}
</style>
@Html.ActionLink("Главная", "Index")
@using (Html.BeginForm())
{
<div class="container">
<div class="form-signin">
<div class="form-group">
@Html.LabelFor(i => i.CSurname, "Фамилия")
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
@Html.EditorFor(i => i.CSurname, new { htmlAttributes = new { @id = "txtSurname", @class = "form-control", @placeholder = "Введите фамилию" } })
</div>
@Html.ValidationMessageFor(i => i.CSurname, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(i => i.CName, "Имя")
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
@Html.EditorFor(i => i.CName, new { htmlAttributes = new { @id = "txtName", @class = "form-control", @placeholder = "Введите имя" } })
</div>
@Html.ValidationMessageFor(i => i.CName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(i => i.CPatronymic, "Отчество")
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
@Html.EditorFor(i => i.CPatronymic, new { htmlAttributes = new { @id = "txtPatr", @class = "form-control", @placeholder = "Введите отчество" } })
</div>
@Html.ValidationMessageFor(i => i.CPatronymic, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(i => i.Login, "Логин")
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-user fa" aria-hidden="true"></i></span>
@Html.EditorFor(i => i.Login, new { htmlAttributes = new { @id = "txtLogin", @class = "form-control", @placeholder = "Введите логин" } })
</div>
@Html.ValidationMessageFor(i => i.Login, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(i => i.Password, "Пароль")
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-lock fa" aria-hidden="true"></i></span>
@Html.PasswordFor(i => i.Password, new { @id = "txtPass", @class = "form-control", @placeholder = "Введите пароль" })
</div>
@Html.ValidationMessageFor(i => i.Password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(i => i.Email, "E-Mail")
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
@Html.EditorFor(i => i.Email, new { htmlAttributes = new { @id = "txtMail", @class = "form-control", @placeholder = "Введите e-mail", @type = "email" } })
</div>
@Html.ValidationMessageFor(i => i.Email, "", new { @class = "text-danger" })
</div>
</div>
<input id="btnAdd" type="submit" class="btn btn-success btn-block" value="Добавить" />
</div>
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$('form').validate({
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "/Authorization/Registration",
data: $(form).serialize(),
success: function (result) {
$(location).attr('href', result.URL);
}
});
}
});
});
控制器:
[HttpPost]
public ActionResult Registration(Client client)
{
if (ModelState.IsValid)
{
/*unitOfWork.Clients.Create(client);
unitOfWork.Save();*/
var url = new { URL = Url.Content("/Authorization/Index") + "#success" };
return Json(url);
}
return View();
}
_Layout:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/scripts/jquery.validate.min.js")
@Scripts.Render("~/scripts/jquery.validate.unobtrusive.min.js")
<div class="container body-content">
@RenderBody()
</div>
使用此选项,验证仅在提交表单后有效。并且在执行Ajax请求之后,它不会将我重定向到我在控制器中收集的地址,而是仅在屏幕上以字符串形式显示此地址。而且,如果不是使用jquery Ajax.Beginform
,而是在提交表单后,但在输入字段中输入错误数据后立即进行验证,则验证不起作用。