Проверка на стороне клиента не работает в ASP.NET MVC5 с помощью Bootstrap

Ответ 1

У меня была такая же проблема. Решение состоит в том, чтобы добавить ссылку .js на главную страницу (_Layout.cshtml)

• jquery.validate.js
• jquery.validate.unobtrusive.js

Ответ 2

У меня была та же проблема. Сравнивая сгенерированный HTML с работающим сайтом, я заметил, что в конце документа было следующее:

<script src="/bundles/jqueryval"></script>

... тогда как пакет должен быть расширен следующим образом:

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

Я посмотрел в App_Start/BundleConfig.cs, и, конечно же, пакет проверки JQuery не был определен в RegisterBundles. Мне пришлось добавить:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

Почему этого не было, я не знаю. Я начал с нового, чистого проекта.

Это довольно неряшливо, что нет ошибки времени компиляции, когда вы ссылаетесь на пакет undefined. Даже постоянная ошибка во время выполнения была бы лучше, чем молчащий сбой. Так много времени потрачено впустую!

EDIT: получается, что у меня не было скриптов проверки JQuery в моем проекте. Я должен был добавить их через NuGet ( "Unobruusive Validation от Microsoft JQuery" ).

Ответ 3

Вы проверили <add key="ClientValidationEnabled" value="true" /> в web.config?

В противном случае это дает хороший обзор: ASP.NET MVC 3: Необходимые шаги для ненавязчивой проверки содержимого динамического /AJAX на стороне клиента. Также действителен для MVC5.

Ответ 4

В нижней части страницы добавьте:

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

и все будет нормально работать.

Ответ 5

У меня была та же проблема, мое решение ясно показывает всю историю в браузере (кеш, куки, форма,...), и все работает правильно.

Ответ 6

У меня была такая же проблема, когда я играл с моим первым проектом MVC. Проблема заключалась в том, что я не включал элементы ввода в элемент формы. Да, очень глупо. Убедитесь, что вы создали форму, например:

@using (Html.BeginForm())
{
    @Html.EditorFor(model => model.FieldA)
    @Html.ValidationMessageFor(model => model.FieldA)

    @Html.EditorFor(model => model.FieldB)
    @Html.ValidationMessageFor(model => model.FieldB)

}

Ответ 7

С помощью тура с использованием MVC вместо добавления в каждое редактируемое представление вы можете добавить в папку просмотра/общего доступа в папку _Layout.cshtml.

просто добавьте

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

внизу _Layout.cshtml, поверх

@Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/jqueryval")

в этом случае script будет влиять на каждую страницу, использующую этот макет.

Ответ 8

Я знаю, что это немного поздно для игры, но это добавляет больше к проверке, и я нашел, что это очень полезно. Иногда конфликтующие ссылки javascript/jQuery Plugin/API (например: searchMeme.js), которые ссылаются на другие версии jquery, могут вызвать проблемы, поэтому я создаю уникальные пакеты для действий входа в учетную запись. Это шаги, которые я должен предпринять:

1. Создайте отдельный макет ~/Views/Shared/_AccountLayout.cshtml для AccountController.cs.

2. Создайте новый ~/Account/_ViewStart.csthml с помощью

@{
    Layout = "~/Views/Shared/_AccountLayout.cshtml";
}

3. Создайте два пакета для css и js в BundleConfig.cs для AccountController:

   bundles.Add(new StyleBundle("~/Content/accountcss").Include(
                "~/Content/site.css",
                "~/Content/bootstrap.css",
                "~/Content/font-awesome.css")); /*if using font-awesome */

   bundles.Add(new ScriptBundle("~/bundles/accountjs").Include(
                "~/Scripts/jquery-1.10.2.js",
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/bootstrap.js"));//must be after jquery validate

4. Сопоставьте пакеты в обоих концах head и body в _AccountLayout.cshtml как таковые:

        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
         @Styles.Render("~/Content/accountcss")
        @Scripts.Render("~/bundles/modernizr")
        @this.RenderSection("MetaContent", false)
        @this.RenderSection("Styles", false)
        </head>

        @Scripts.Render("~/bundles/accountjs")
        @this.RenderSection("Scripts", false)
        </body>

* ПРИМЕЧАНИЕ. Убедитесь, что bootstrap после jqueryval в пакете

5. Убедитесь, что у вас есть @Html.ValidationMessageFor для каждого поля ввода в пределах ~/Account/Login.cshtml, ~/Account/Register.cshtml и т.д. соответственно.

<div class="form-group">
       @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
          <div class="col-md-10">
               @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
          </div>
</div>

6. Используйте DataAnnotes для создания дополнительных пользовательских ошибок проверки [RegularExpression(@"^([\w]{2,20})@?([\w]{2,20}).?[a-zA-Z]{2,3}$", ErrorMessage="")]:

[Required(ErrorMessage = "*Username is required."), RegularExpression(@"^[\w+]{3,10}\s?([\w+]{3,15})$", ErrorMessage = "*Username can only be Alphanumeric"),StringLength(25, ErrorMessage = "The {0} must be at least {2} characters long and no bigger than {1} characters.", MinimumLength = 5)]
public string UserName { get; set; }

7. (необязательно) Наконец, если вы изменили DataAnotation для пароля, вы MUST также измените Политику паролей в ~/App_Start/IdentityConfig.cs:

manager.PasswordValidator = new PasswordValidator
{
    RequiredLength = 6,
    RequireNonLetterOrDigit = false,
    RequireDigit = true,
    RequireLowercase = true,
    RequireUppercase = true,
};

8. (необязательно) Кроме того, ознакомьтесь с этой статьей о ролях и т.д.

Ответ 9

Я думаю, что @Html.ValidationMessageFor отсутствует в шаблоне. Я получаю ошибки, но не сообщения.