Ненавязчивая проверка на стороне клиента в MVC4 не работает

У меня есть страница макета со всеми скриптами, как показано ниже.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Site</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <some custom css>
    <modernizr>
    <script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
    <some custom scripts>
    <bootstrap scripts>
    <knockout scripts>           
</head>
<body>
  @RenderBody()
</body>
</html>

Затем у меня есть моя регистрационная форма, как показано

@model Mysite.Models.Account.Account
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" }))
{
 @Html.AntiForgeryToken();
 <h1>Login</h1>
 @Html.ValidationSummary();
 @Html.EditorFor(m => m.Name)
 @Html.EditorFor(m => m.Address1)
 @Html.EditorFor(m => m.Address2)
 @Html.EditorFor(m => m.Phone1)
<input type="button" value="Register" id="btn1" />
}
<script>
var form = $("#register");
 $("#btn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            url: 'http://localhost:3885/Account/Register',
            data: form.serialize(),
            type: 'POST',
            success: function (result) {},
            error: function (req, status, error) {
                function(req, status, error);
            }
        });
    });
</script>

Моя учетная запись Модельный класс выглядит следующим образом:

public class Account
{
   public Name name {get; set;}
   public Address Address1 {get; set;}
   public Address Address2 {get; set;}
   public Phone Phone1 {get;set;}
}

где каждое свойство также является модельным классом со своими собственными EditorTemplates, например

public class Name
{
   [Required]
   public string FirstName {get; set;} 
   public string MiddleName {get; set;}
   [Required]
   public string LastName {get; set;}
}

и введите Name.cshtml EditorTemplate, как показано ниже

<div >
 @Html.TextBoxFor(m=>m.FirstName);
 @Html.TextBoxFor(m=>m.MiddleName);
 @Html.TextBoxFor(m=>m.LastName);
<div>

аналогично для Address.cshtml и Phone.cshtml

в web.config: -

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

При нажатии кнопки "Регистрация" в пустой форме он делает запись ajax для регистрации метода [HttpPost] Controller. Почему это не дает мне сообщения о проверке на стороне клиента, я думаю, что это называется ненавязчивой валидацией? Я также не вижу ошибок в консоли.

Ответы

Ответ 1

Кнопка "Отправить" должна быть типа "submit", чтобы активировать проверку правильности проверки jquery, независимо от того, использует ли он сам плагин jquery или с ненавязчивым плагином.

Таким образом, это приведет к проверке:

<input type="submit" value="Register" id="btn1" />

Но, увидев, что вы уже написали какой-то код для обращения к кнопке, может быть проще просто вручную запустить проверку

$("#btn1").click(function (e) {

      e.preventDefault();

      // now trigger the form validation, result is 1 or 0
      var result = $('form').valid();  

      $.ajax(
         // details omitted
      );
});

Ответ 2

Я думаю, вам нужно изменить порядок ссылок на скрипты

<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>

Ответ 3

если вы используете _Layout.cshtml, удалите следующую ссылку

@Scripts.Render("~/bundles/jquery")

внизу

которые работают для меня!

Ответ 4

У меня также была аналогичная проблема, которая потребовала нескольких недель для отладки. Я использовал страницу aspx.

Основная причина заключалась в том, что оператор Html.BeginForm был помещен после тега <table>.

<table>
   <% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
</table>

Это привело к тому, что тег <form> закрылся перед любым тегом <input>, и поэтому ненавязчивая проверка клиента не работает.

<form action="/Admin/ContainerManagement" method="post" novalidate="novalidate"></form> <tr> <td><input></td> </tr>

Итак, не забудьте поставить Html.BeginForm перед тегом <table>

<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
<table>...</table>
<% } %>

Ответ 5

У меня была та же проблема, и я обнаружил, что если я позвоню 'Element.valid()' перед вызовом библиотеки для проверки работоспособности функции, чем она больше не будет проверять мою форму. Я решил это, создав расширение, которое проверяет, была ли форма обработана и только, чтобы проверить, действительно ли элемент

 $.fn.revalidate = function () {
        if (this.length) {
            var validator = this.closest("form").data("validator");
            if (validator)
                validator.element(this);
        }
        return this;
    };

Ответ 6

Вам также необходимо добавить сообщения об ошибках

@Html.EditorFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name)

 @Html.EditorFor(m => m.Address1)
@Html.ValidationMessageFor(m => m.Address1)

 @Html.EditorFor(m => m.Address2)
@Html.ValidationMessageFor(m => m.Address2)

 @Html.EditorFor(m => m.Phone1)
@Html.ValidationMessageFor(m => m.Phone1)