I'm trying to validate fields with ValidationMessageFor, and everything works fine if you submit the form using Html.Beginform, but if I use an AJAX query, then validations no longer work.
My Code
View:
@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);
}
});
}
});
});
Controller:
[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>
With this option validation works, but only after the form is submitted. And after performing the Ajax request, it does not redirect me to the address that I collect in the controller, but instead simply displays this address as a string on the screen. And if instead of using jquery Ajax.Beginform, then, validation does not work when the form has already been submitted, but immediately after entering incorrect data in the input field.
