Form Validation with jquery ajax

You must validate the form. I did it using Ajax.Beginform

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 (Ajax.BeginForm("Registration", new AjaxOptions { OnSuccess = "Success" })) { <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"> function Success(result) { $(location).attr('href', result.URL); } </script> 

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(); } 

And everything works perfectly. Fields give messages immediately after entering data as it should be. And as a result of the request, the program redirects to another page. But I wanted to do the same with jquery. Googled here is such an option. 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); } }); } }); }); </script> 

The controller is the same. And it still works, but for some reason in client debugging I noticed that it does not enter in success, I decided to check the debugging on the server and wrote Request.IsAjaxRequest , the result was false and as a result of the execution of the request I just issued a page with the text address:

Tell me please what am I doing wrong? How to make the result be the same as when using a helper?