Проверка на стороне клиента MVC 4 не работает

Question

Проверка на стороне клиента MVC 4 не работает

Может кто-нибудь сказать мне, почему проверка на стороне клиента не работает в моем приложении MVC 4.

_layout.schtml

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

В моем web.config у меня есть:

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

На моей странице login.cshtml у меня есть:

@using (Html.BeginForm())
{
    <div class="formscontent">

        <ol>
            <li>
                @Html.LabelFor(x => x.AgreementNumber)
                <br />
                @Html.TextBoxFor(x => x.AgreementNumber, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.AgreementNumber)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.UserName)
                <br />
                @Html.TextBoxFor(x => x.UserName, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.UserName)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.Password)
                <br />
                @Html.PasswordFor(x => x.Password, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.Password)
                <br />
                <br />
            </li>
        </ol>

    </div>

    <ol>
        <li>
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
        </li>
    </ol>

    <br />

    <input class="mainbutton" type="submit" value="@Model.Localisation.TranslateHtmlString("LogonBtn")" /><br />
    <div style="text-align: left; padding: 0 5px 5px 10px;">
        Forgot login-info? clik <a class="link" href="@Url.Action("Index", "Credentials")">here.</a>
    </div>

}

В нижней части страницы входа в систему:

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

JavaScript включен в моем браузере. В шаблонном проекте MVC 4 от клиента Visual Studio валидация работает отлично.

Запустив приложение, на странице входа в систему при просмотре исходного кода я вижу, что это отображается:

<label for="AgreementNumber">number</label>
<br />
<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />
<br />
<span class="field-validation-valid" data-valmsg-for="AgreementNumber" data-valmsg-  replace="true"></span>

и в этом внизу:

<script src="/BMWebsite/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.inline.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.unobtrusive.js"></script>

Свойства моей модели аннотированы:

public class LogonModel : ModelBase
{
    [MyRequired("AgreementNumberRequiredProperty")]
    [MyDisplay("AgreementNumberLabel")]
    public string AgreementNumber { get; set; }

    [MyRequired("UserNameRequiredProperty")]
    [MyDisplay("UserNameLabel")]
    public string UserName { get; set; }

    [MyRequired("PasswordRequiredProperty")]
    [DataType(DataType.Password)]
    [MyDisplay("PasswordLabel")]
    public string Password { get; set; }

    [MyDisplay("RememberMeCheckBox")]
    public bool RememberMe { get; set; }
}

MyRequired это класс, производный от обычного RequiredAttribute. Причина в том, что мои сообщения об ошибках локализуются путем переопределения FormatErrorMessage(string name) метод RequiredAttribute учебный класс. И все работает нормально - мои ярлыки и сообщения об ошибках локализованы.

MyRequired.cs

public class MyRequiredAttribute : RequiredAttribute
{
    private readonly string _errorMessagekey;

    public MyRequiredAttribute(string errorMessage)
    {
        _errorMessagekey = errorMessage;
    }

    public override string FormatErrorMessage(string name)
    {
        var translation = HttpContext.Current.Session["translation"] as LocalisationHelper;

        return translation != null ? translation.Translate(_errorMessagekey) : ErrorMessage;
    }
}

Я установил точку останова в версии POST моего метода действия входа в систему, и его ударили. Форма отправляется на сервер, где происходит проверка на стороне сервера. Проверка на стороне клиента не происходит.

Что мне не хватает?

Спасибо.

65

jquery asp.net-mvc-4 jquery-validate unobtrusive-validation

Источник

user1615244 25 янв '13 в 10:55

19 ответов

Другие вопросы по тегам jquery asp.net-mvc-4 jquery-validate unobtrusive-validation

user491413 01 июл '13 в 07:18 2013-07-01 07:18 · Answer 1 · 2013-07-01 07:18

У меня такая же проблема. Кажется, что ненавязчивые сценарии проверки не были загружены (см. Скриншот в конце). Я исправил это, добавив в конце _Layout.cshtml

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

Конечный результат:

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/jqueryval")
   @RenderSection("scripts", required: false)

За исключением моих довольно стандартных CRUD-представлений, все по умолчанию является шаблоном проекта Visual Studio.

Загруженные скрипты после исправления проблемы:

user5851235 28 янв '16 в 09:39 2016-01-28 09:39 · Answer 2 · 2016-01-28 09:39

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

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

15

Источник

user5851235 28 янв '16 в 09:39

user1172763 27 авг '15 в 17:06 2015-08-27 17:06 · Answer 3 · 2015-08-27 17:06

Я наконец решил эту проблему, включив необходимые скрипты прямо в мой файл.cshtml, в следующем порядке:

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

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

user3028916 24 ноя '13 в 18:28 2013-11-24 18:28 · Answer 4 · 2013-11-24 18:28

В Global.asax.cs метод Application_Start() добавляет:

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MyRequiredAttribute), typeof(RequiredAttributeAdapter));

10

Источник

user3028916 24 ноя '13 в 18:28

user2349252 13 июл '13 в 07:24 2013-07-13 07:24 · Answer 5 · 2013-07-13 07:24

Возможно, вы уже решили эту проблему, но мне повезло, изменив порядок элемента jqueryval в BundleConfig с помощью App_Start. Проверка на стороне клиента не будет работать даже на новом готовом интернет-решении MVC 4. Поэтому я изменил значение по умолчанию:

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

в

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

и теперь моя проверка на стороне клиента работает. Вы просто хотите убедиться, что ненавязчивый файл находится в конце (так что это не навязчиво, ха:)

user5355501 20 сен '15 в 07:26 2015-09-20 07:26 · Answer 6 · 2015-09-20 07:26

Если вы используете jquery.validate.js а также jquery.validate.unobtrusive.js для проверки на стороне клиента вы должны помнить, что вы должны зарегистрировать любой атрибут проверки любого элемента DOM по вашему запросу. Для этого вы можете использовать этот код:

$.validator.unobtrusive.parse('your main element on layout');

зарегистрировать все атрибуты проверки. Вы можете вызвать этот метод (например):$(document).ajaxSuccess() or $(document).ready() зарегистрировать все из них, и ваша проверка может быть успешно проведена вместо регистрации всех файлов js в файлах cshtml.

user29407 25 янв '13 в 10:56 2013-01-25 10:56 · Answer 7 · 2013-01-25 10:56

На вашем входе нет атрибутов проверки данных. Убедитесь, что вы сгенерировали его с помощью помощника на стороне сервера, такого как Html.TextBoxFor, и что он находится внутри формы:

@using (Html.BeginForm())
{
    ...
    @Html.TextBoxFor(x => x.AgreementNumber)
}

Также я не знаю, что jquery.validate.inline.js сценарий, но если это как-то зависит от jquery.validate.js Плагин убедитесь, что на него ссылаются после него.

Во всех случаях посмотрите на вашу консоль javascript в браузере на предмет возможных ошибок или отсутствующих скриптов.

user448355 01 ноя '16 в 11:06 2016-11-01 11:06 · Answer 8 · 2016-11-01 11:06

Для меня это было много поисков. В конце концов я решил использовать NuGet вместо загрузки файлов самостоятельно. Я удалил все задействованные сценарии и наборы сценариев и получил следующие пакеты (последние версии на данный момент)

jQuery (3.1.1)
Проверка jQuery (1.15.1)
Microsoft jQuery Ubobtrusive Ajax (3.2.3)
Ненавязчивая проверка Microsoft jQuery (3.2.3)

Затем я добавил эти пакеты в файл BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.unobtrusive-ajax.js"));

Я добавил эту ссылку в _Layout.cshtml:

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

И я добавил эту ссылку к любому представлению, которое мне нужно было проверить:

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

Теперь все работает.

Не забывайте эти вещи (многие люди забывают их):

Теги формы (@using (Html.BeginForm()))
Сводка проверки (@Html.ValidationSummary())
Сообщение о проверке вашего ввода (Пример: @Html.ValidationMessageFor(model => model.StartDate))
Конфигурация ()
Порядок файлов, добавляемых в комплект (как указано выше)

user2218697 24 май '16 в 10:09 2016-05-24 10:09 · Answer 9 · 2016-05-24 10:09

У меня была проблема с проверкой, форма сообщений, затем она проверяет,

Это не работает с JQuery CDN

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Это работает без JQuery CDN

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Надежда помогает кому-то.

user1021054 01 фев '18 в 12:31 2018-02-01 12:31 · Answer 10 · 2018-02-01 12:31

Моя проблема была в web.config: UnobtrusiveJavaScriptEnabled был отключен

<appSettings>

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

<add key="UnobtrusiveJavaScriptEnabled" value="false" />

</appSettings>

Я изменился на и теперь работает:

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

3

Источник

user1021054 01 фев '18 в 12:31

user8928351 13 сен '19 в 17:58 2019-09-13 17:58 · Answer 11 · 2019-09-13 17:58

Это работает для меня, перейдите к вашему классу модели и установите сообщение об ошибке над любой опорой

[Required(ErrorMessage ="This is Required Field")]
    public string name { get; set; }

import пространство имен для Требуется Ctrl+. и, наконец, добавьте это в поле зрения

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

user14451 25 янв '13 в 11:05 2013-01-25 11:05 · Answer 12 · 2013-01-25 11:05

Причиной того, что атрибуты data-* проверки не отображаются в визуализированном html для вашего ввода, может быть отсутствие контекста формы. FormContext создается автоматически при создании формы с использованием @using(Html.BeginForm(...)) { ... },

Если вы используете обычный HTML-тег для своей формы, вы не получите проверку на стороне клиента.

user5305805 06 сен '15 в 11:17 2015-09-06 11:17 · Answer 13 · 2015-09-06 11:17

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

Этот код работал для меня.

2

Источник

user5305805 06 сен '15 в 11:17

user767524 06 янв '16 в 09:24 2016-01-06 09:24 · Answer 14 · 2016-01-06 09:24

В моем случае сама валидация работала (я мог проверить элемент и получить правильное логическое значение), но визуального вывода не было.

Моя ошибка была в том, что я забыл эту строку @Html.ValidationMessageFor(m => ...)

У TS есть это в его коде, и я оказался на правильном пути, но я поместил это здесь как ссылку для других.

user678338 25 янв '13 в 11:01 2013-01-25 11:01 · Answer 15 · 2013-01-25 11:01

Строка ниже показывает, что вы не установили DataAttribute, как это требуется для AgreementNumber

<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />

тебе нужно

[Required]
public String AgreementNumber{get;set;}

1

Источник

user678338 25 янв '13 в 11:01

user7791855 30 мар '17 в 12:17 2017-03-30 12:17 · Answer 16 · 2017-03-30 12:17

Я создал этот HTML <form action="/StudentInfo/Edit/2" method="post" novalidate="novalidate"> где novalidate="novalidate" препятствовал выполнению jQuery на стороне клиента, когда я удалил novalidate="novalidate"Клиентский JQuery был включен и начал работать.

0

Источник

user7791855 30 мар '17 в 12:17

user1186073 20 апр '17 в 15:03 2017-04-20 15:03 · Answer 17 · 2017-04-20 15:03

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

И мне нужно было добавить

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

Частичное представление, даже если оно уже присутствует в представлении _Layout.

Рекомендации:

Аннотации данных / проверка не работает для частичных представлений

user7695789 15 мар '18 в 22:29 2018-03-15 22:29 · Answer 18 · 2018-03-15 22:29

В моем случае я добавил, и id равен имени, автоматически сгенерированному для VS в html, и в коде я добавил строку для этого случая.

$(function () {
            $.validator.addMethod('latinos', function (value, element) {
                return this.optional(element) || /^[a-záéóóúàèìòùäëïöüñ\s]+$/i.test(value);
            });

            $("#btn").on("click", function () {
                //alert("aa");
                $("#formulario").validate({                    
                    rules:
                    {
                        email: { required: true, email: true, minlength: 8, maxlength: 80 },
                        digitos: { required: true, digits: true, minlength: 2, maxlength: 100 },
                        nombres: { required: true, latinos: true, minlength: 3, maxlength: 50 },
                        NombresUsuario: { required: true, latinos: true, minlength: 3, maxlength: 50 }
                    },
                    messages:
                    {
                        email: {
                            required: 'El campo es requerido', email: 'El formato de email es incorrecto',
                            minlength: 'El mínimo permitido es 8 caracteres', maxlength: 'El máximo permitido son 80 caracteres'
                        },
                        digitos: {
                            required: 'El campo es requerido', digits: 'Sólo se aceptan dígitos',
                            minlength: 'El mínimo permitido es 2 caracteres', maxlength: 'El máximo permitido son 10 caracteres'
                        },
                        nombres: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        },
                        NombresUsuario: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        }
                    }
                });
            });

<tr>@*<div class="form-group">     htmlAttributes: new { @class = "control-label col-md-2" }      , @class = "form-control" }*@
                <td>@Html.LabelFor(model => model.NombresUsuario )</td>

                        @*<div class="col-md-10">*@
                <td>
                    @Html.EditorFor(model => model.NombresUsuario, new { htmlAttributes = new { id = "NombresUsuario" } })
                    @Html.ValidationMessageFor(model => model.NombresUsuario, "", new { @class = "text-danger" })
                </td>

user3678363 11 июн '19 в 13:51 2019-06-11 13:51 · Answer 19 · 2019-06-11 13:51

Убедитесь, что вы используете Attributes (например RequiredAttribute) который подпадает под System.ComponentModel.DataAnnotations пространство имен

0

Источник

user3678363 11 июн '19 в 13:51

user7132736 08 ноя '16 в 16:27 2016-11-08 16:27 · Answer 20 · 2016-11-08 16:27

Использование:

@ Html.EditorFor

Вместо:

@ Html.TextBoxFor

0

Источник

user7132736 08 ноя '16 в 16:27

user2840937 26 фев '15 в 09:11 2015-02-26 09:11 · Answer 21 · 2015-02-26 09:11

  @section Scripts
 {
<script src="../Scripts/jquery.validate-vsdoc.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.min.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.min.js"></script>
}

-2

Источник

user2840937 26 фев '15 в 09:11