Проверка JQuery - ошибка при добавлении правил к элементу ввода?

Я пытаюсь выполнить проверку Jquery с помощью http://docs.jquery.com/Plugins/Validation:

Мой проект:

Элемент << →

<form action="submit.php" id="form_id">
  <input type="text" class="val-req" id="my_input" name="myval" />
  <input type="button" onclick="validate_form('form_id', function() { $('#form_id').submit(); })" />
  <span id="val-msg" class="my_input"></span>
</form>

Затем на dom ready:

  $(document).ready(function() {
                      $('.val-req').rules('add', {required:true});
                   });

Подтвердить метод:

 function validate_form(form_id, callback) {
       var form = $('#'+form_id);
       $('.val-req').each(function() {$(this).rules('add', {required:true});});
       $(form).validate({
                errorElement: "span",
                errorClass:   "val-error",
                validClass:   "val-valid",
                errorPlacement: function(error, element) {
                                      $('#val-msg.'+$(element).attr('id')).innerHTML(error.html());
                               },
                submitHandler: callback
       });
 }

В соответствии с моими ожиданиями он должен отображать сообщение об ошибке в поле владельца места в форме.

Но Проблема

Ошибка в Chrome-консоли: Неподготовлено TypeError: невозможно прочитать настройки свойств undefined

Он также дает ошибку в других браузерах. Затем я попытался выяснить проблему и нашел:

 $('.val-req').rules('add', {required:true});   # This is causing the error

Как, по моему пониманию и документации → Это должно быть правильно.

Почему это вызывает TypeError и что я могу сделать для его устранения?

Ответ 1

Вы должны добавить правила после вызова плагина validate в элементе формы:

$("form").validate()
$(yourElement).rules("add", {...})

Ответ 2

Я думаю, что ваш код сложнее, чем нужно. Вам нужно просто позвонить validate по готовому документу (если ваша форма существует в готовом документе):

$(document).ready(function() {
    $(".val-req").addClass("required");
    $("#form_id").validate({
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});

Пример: http://jsfiddle.net/4vDGM/

Вы также можете просто добавить класс required к требуемым элементам вместо добавления их через JavaScript.

Еще одна вещь, которую вы можете сделать, это добавить правила в объект правил validate options:

$(document).ready(function() {
    $("#form_id").validate({
        rules: {
            myval: "required"
        },
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});

Пример: http://jsfiddle.net/GsXnJ/

Ответ 3

Преступником является метод delegate(), который не проверяет наличие валидатора:

function delegate(event) {
  var validator = $.data(this[0].form, "validator"),
  eventType = "on" + event.type.replace(/^validate/, "");
  // this fixes handling the deleted validator:
  if (!validator) return;
  validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
}

Я искал решение и нашел его в сообщении в блоге.

Источник: http://devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/

Ответ 4

Я пытался изменить правила в форме, на которой уже была установлена валидация, но я обнаружил, что мой код $(document).ready(...) выполнялся до того, как была создана основная проверка формы, поэтому добавление короткий наборTimeout вылечил эту проблему для меня - например,

setTimeout(function() {
    $(yourElement).rules("add", {...})
}, 100);