Проверка jQuery: $.data($(‘form’)[0], ‘validator’).настройки возвращает неопределенное

#javascript #jquery #asp.net #forms #validation

#javascript #jquery #asp.net #формы #проверка

Вопрос:

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

 $(document).ready(function () {
    // enable validation when an input loses focus.
    var settngs = $.data($('form')[0], 'validator').settings;
    settngs.onfocusout = function (element) { $(element).valid(); };
});
  

Это работает в одном проекте, в то время как это создает это исключение в другом проекте, потому что $.data($(‘form’)[0], ‘validator’) возвращает undefined ($.data($(‘form’)[0]) возвращает пустой объект):

Неперехваченная ошибка типа: не удается прочитать свойство ‘settings’ неопределенного

Однако проверка jQuery работает нормально при нажатии кнопки отправки, поэтому все остальное должно быть настроено правильно.

Я загружаю эти скрипты в конце тега body: (функция, перечисленная выше, находится в customvalidations.js поэтому он должен выполняться после применения средства проверки к форме)

 <script src="/Staffing/Scripts/jquery-2.1.1.js"></script>
<script src="/Staffing/Scripts/globalize/globalize.js"></script>
<script src="/Staffing/Scripts/globalize/cultures/globalize.culture.de-DE.js"></script>
<script src="/Staffing/Scripts/bootstrap.js"></script>
<script src="/Staffing/Scripts/respond.js"></script>
<script src="/Staffing/Scripts/bootstrap-datepicker.js"></script>
<script src="/Staffing/Scripts/bootstrap-datepicker-globalize.js"></script>
<script src="/Staffing/Scripts/locales/bootstrap-datepicker.de.js"></script>
<script src="/Staffing/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Staffing/Scripts/jquery.validate.js"></script>
<script src="/Staffing/Scripts/jquery.validate.globalize.js"></script>
<script src="/Staffing/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Staffing/Scripts/localization/messages_de.js"></script>
<script src="/Staffing/Scripts/customvalidations.js"></script>
<script src="/Staffing/Scripts/uiadditions.js"></script>
<script src="/Staffing/Scripts/default.js"></script>
  

Решение:
Это код, который работает:

 $(document).ready(function () {
    // enable validation when an input loses focus.
    var allForms = $('form');
    $.each(allForms, function (key, value) {
        var val = $.data(value, 'validator');
        if (val != undefined) {
            var settngs = val.settings;
            settngs.onfocusout = function (element) { $(element).valid(); };
        }});
});
  

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

Ответ №1:

Я только что обновился до Microsoft.jQuery.Ненавязчивый.Пакет проверки.3.2.0. Я столкнулся с той же проблемой. Возможно ли, что вы также обновились до той же версии?

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

Предыдущая версия:

     var $forms = $(selector)
        .parents("form")
        .andSelf()
        .add($(selector).find("form"))
        .filter("form");
  

Новая версия:

         $forms = $selector.parents()
                          .addBack()
                          .filter("form")
                          .add($selector.find("form"))
                          .has("[data-val=true]"); // key point!
  

Ключ, похоже, такой: the has("[data-val=true]") . То есть, если ваша форма не имеет потомков (например, элемента ввода) с этим значением атрибута, она не будет проанализирована помощником по проверке, и никакие данные ‘validator’ не будут назначены этому элементу формы. Затем вы получите эту ошибку ‘undefined’, если попытаетесь получить доступ к средству проверки этой формы на более позднем этапе.

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

Надеюсь, это поможет.

Комментарии:

1. Это было причиной. Смотрите мой отредактированный вопрос для рабочего кода.

2. Просто вау. Мы используем ненавязчивый интерфейс razor для динамических элементов управления: буквально установив только контейнер div где-нибудь под формой, восстановили всю нашу нарушенную проверку. Это было трудно найти, и этот ответ был очень полезен. Спасибо.

3. Да, определенно полезно, большинство моих полей были доступны только для чтения, а два, которые не были, не имели никаких атрибутов data-val. Трудно найти, заняло около часа.

4. Чтобы принудительно создать validator данные, я просто добавил фиктивный ввод в свой, <form> вот так: <input type="hidden" data-val="true" data-val-required="The Useless field is required." id="Useless" name="Useless" value="Useless" /> . Спасибо за этот ответ, действительно было очень сложно понять, что происходит.

Ответ №2:

Это может произойти и с вами, вы не вызывали validate() в своей форме как таковой:

 $("#your_form").validate();
  

В моем случае у меня не было формы с идентификатором «your_form» на моей странице, что вызывало эту ошибку при попытке добавить правила.

Комментарии:

1. У меня сработало при динамическом добавлении формы через ajax

Ответ №3:

Похоже, что в ваших проектах используются разные типы validadion (один из них использует ненавязчивый, а второй — по умолчанию).

Пожалуйста, проверьте, используете ли вы следующие настройки в web.config обоих проектов.:

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

Также вы пытаетесь работать с первой формой в вашем документе.

В случае, когда форм нет — вы получите сообщение об ошибке.

В случае, когда существует более одной формы — только первая форма будет использовать focusout для проверки.

Итак, вы должны сделать то же самое для каждой формы:

 $(document).ready(function () {
    var $forms = $('form');
    $.each($forms, function (key, value) {
        // enable validation when an input loses focus.
        var settings = $.data(value, 'validator').settings;
        settings.onfocusout = function (element) { $(element).valid(); };
    });
});
  

Ответ №4:

Выполнение этого $.validator.unobtrusive.parse($("#base-modal form")); решило мою проблему

Ответ №5:

Сначала проверьте количество форм, я думаю, вы используете неправильную форму.

 $(document).ready(function () {
// enable validation when an input loses focus.
   if($('form').length > 0) {
     // $('form')[0] is it proper form?
     var settngs = $.data($('form')[0], 'validator').settings;
     settngs.onfocusout = function (element) { $(element).valid(); };
   }
});
  

Комментарии:

1. $(‘form’).length > 0 возвращает true (на странице есть форма)