Подтвердить что ты не робот

Проверка на стороне клиента 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 моего метода действия входа, и он попадает. Форма отправляется на сервер, где происходит проверка на стороне сервера. Проверка на стороне клиента не происходит.

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

Спасибо.

4b9b3361

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

В приложении Global.asax.cs, Application_Start() добавьте:

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

Ответ 4

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

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

to

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

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

Ответ 8

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

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

Ответ 9

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

Это не работает с 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>

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

Ответ 10

Для меня это было много поиска. В конце концов я решил использовать 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))
  • Конфигурация()
  • Порядок файлов, добавленных в комплект (как указано выше)

Ответ 11

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

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

Ответ 12

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

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

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

Ответ 13

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

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

вам нужно

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

Ответ 14

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

@Html.EditorFor

Вместо:

@Html.TextBoxFor

Ответ 15

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

Ответ 16

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

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

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

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

Литература:

Ответ 17

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

<appSettings>

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

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

</appSettings>

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

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

Ответ 18

В моем случае я добавил, и 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>

Ответ 19

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

Ответ 20

  @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>
}