Проверка разделенной на HTML5 формы с помощью jQuery.validate ()

Question

У меня есть следующие JS и HTML:

$('#html5submit').click(function() {
  $('#html5form').validate({
    rules : { html5required: { required: true} },
    submitHandler: function(e) {
      $.post({
        //My AJAX here works just fine
      });
    };
  });
});

<form id = "html5form"></form>

<input form = "html5form" type = "text" name = "html5required" required maxlength = "200">
<input form = "html5form" id = "html5submit" type = "submit">

Правильный ли приведенный выше код?

Моя идея состоит в том, чтобы запретить форму дляотправить, и все же я буду выполнять некоторые обновления / вставки в моей базе данных, позвонив сказал AJAX. Если я сотру rules часть JS , я могу нормально запустить AJAX.Тем не менее, при выполнении вышеупомянутого не подтвердил мое поле ввода, то есть AJAX все еще работал, хотя поле пустое !!!

1. Если я поместил required в мой HTML input, нужно ли повторять правило required на моем JS?Каков наилучший способ размещения required в подобной ситуации (когда форма отделена, и я использую проверку формы jQuery)?
2. Что я делаю правильно в приведенном выше?Я предполагаю, что, поскольку я буду запускать проверку формы только после нажатия кнопки отправки, я разместил раздел $('html5submit').click(function(){});, чтобы узнать, когда следует запускать проверку.

Answer 1

Добавление обязательного атрибута к элементам формы приведет к тому, что браузер «подтвердит» ввод.Но всякий раз, когда пользователь входит в инструменты разработки браузера, он может легко удалить это.Используя валидатор, уже безопаснее, но не невозможно обойти эту меру безопасности.Единственный верный способ проверки - это проверка в php, потому что пользователь не может изменить там код.

Что касается работы валидатора, исправление этих двух вещей заставит его работать:

• Вам нужно , чтобы обернуть входные элементы в элементе формы, именно так работает валидатор jquery.
• Удалите точку с запятой в объекте json, который используется .validate ()

Это даст вам следующий результат, который сработает и предотвратит отправку формы, если оставить ее пустой.

$('#html5submit').click(function() {
  $('#html5form').validate({
      rules : { 
      html5required: { 
        required: true
      } 
    },
    submitHandler: function(e) {
      $.post({
        //My AJAX here works just fine
      });
    } // There was a semicolon here!
  });
});

<form id = "html5form">
  <input form="html5form" type="text" name="html5required" maxlength="200">
  <input form="html5form" id="html5submit" type="submit">
</form>

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

Answer 2

Как указано в комментариях, у вас есть несколько проблем ...

1. Чтобы этот плагин работал, все элементы input ДОЛЖНЫ быть в контейнере <form>.Обходного пути нет.

2. Метод .validate() используется для инициализации плагина в вашей форме и поэтому должен вызываться один раз при загрузке страницы, а не при каждом событии click.Удалите и замените обработчик событий click обработчиком событий, готовым для документов.

3. Если вы уже объявили required в объекте rules объекта .validate(), тогда выможно удалить соответствующий атрибут HTML5.Для согласованности также следует удалить атрибут maxlength HTML5 и объявить его в методе .validate().При использовании этого плагина вся проверка HTML5 автоматически отключается.Если вы предпочитаете объявлять все правила с помощью атрибутов HTML5, вы должны удалить их из .validate(), и плагин все равно выберет их в качестве допустимых правил.Это только моя рекомендуемая лучшая практика, поскольку наличие различных правил в разных местах приводит к путанице при устранении неполадок.

4. В конце паразитной точки с запятой ;Ваша submitHandler функция вызывает синтаксическую ошибку.

Рабочий код :

JavaScript:

$(document).ready(function() {

    $('#html5form').validate({
        rules: {
            html5required: {
                required: true,
                maxlength: 200
            }
        },
        submitHandler: function(e) {
            $.post({
                //My AJAX here works just fine
            });
        }
    });

});

HTML:

<form id="html5form">
    <input form="html5form" type="text" name="html5required">
    <input form="html5form" id="html5submit" type="submit">
</form>

Рабочая DEMO: jsfiddle.net / s0qgdjm4 / 2

Подробнее:

Базовое использование этого плагина вместе с лучшими практиками приведено на странице SO Wiki для тега jquery-validate .

Официальная документация здесь .

Answer 3

Я не совсем уверен, что вы пытаетесь достичь.Но вы можете добавить функцию в jQuery validate, если форма неверна, она называется invalidHandler, см. Здесь:

$(document).ready(function(){
 $('#html5form').validate({
 rules : { html5required: { required: true} 
 },
 invalidHandler: function(event, validator) {
 // Make ajax call here
 $.ajax();
 },
 submitHandler: function(e) {
   $.post({
     //My AJAX here works just fine
   });
  };
 });
}

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