jQuery с использованием.on и.validate должен дважды отправить форму для проверки

Я загружаю форму через ajax и использую новый.on() для загрузки плагина проверки JQuery не загружается, прежде чем я нажимаю кнопку отправки во второй раз. Я понимаю, почему я думаю. Функция on () загружает подтверждение в форме, когда я нажимаю "отправить". Есть ли способ это исправить? Раньше я использовал livequery, но это не работает с jQuery 1.9.1 или, по крайней мере, не рекомендуется. Вот мой код:

 $(document)
.on("submit",function(event){
$("#myform").validate();
    event.preventDefault();
  })

Этот код работал раньше в JQuery 1.4.2

 $("#myform")
.livequery(function(){
$(this).validate():
  })

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

Обновление: спасибо за новое понимание Sparky! Я привык к livequery в более ранних версиях jQuery. Но я понимаю, что livequery постоянно прислушивается к элементу и загружает процессор клиенту. Ваш код на jsfiddle делает именно то, что я хочу!

Так что я не должен использовать.on() в сгенерированной форме? Вместо этого запустите validate() в форме в обратном вызове. Этот код работает (внутри document.ready, конечно):

$("#ask").click(function(){
     //send postdata from inputs, returns form with filled fields (defined with jQuery selectors)
    $.post("include_form.lasso",{zip:zip,custno:custno},function(data){
    // div"skjema" is filled with form with ID  
$("#skjema").html(data);
})
    .done(function() { $("#myform").validate();});
})

У меня есть много дополнений в validate(), который здесь не показан. Я не проверял это, но я думаю, что это будет работать. Лучше использовать.ajax() вместо моего кода.post() здесь? Что я делаю - когда щелкают по ссылке, отправляем два поля zip и custno в include_form.lasso - заполняем результат в DIV "skjema". Это форма - присоедините функцию validate() к сгенерированной форме - мне не нужен stopPropogation() в форме, чтобы предотвратить отправку по умолчанию? Это должно проверить в первую очередь?

Обновление: после большой помощи от Sparky вот что работает: просто хотел поделиться своим кодом. Мне нужно 2 функции для моей динамической формы, validate() и autocomplete(). Поэтому я поместил код validate() и автозаполнение в 2 функции:

function pumpemod(){ 
$("#pumpemod").autocomplete({
source: "code/sql2.php?mod=1",
minLength: 3,
delay: 400}); }

function send_validate() { $("#my_dropdown").validate()...}

Поэтому в коде.on() я вызываю функции. Когда я нажимаю переключатель, он выбирает форму. Это выглядит так:

$(document)
    .on('click','input.montRadio',function(event){
    var pnr = $("#postnr").val();
    var knr = $(this).attr("rel");
   $.post("code/vis_skjema.lasso",{postnr:pnr,kundenr:knr},function(data){
        $("#skjema").html("/images/loading.gif");
        $("#skjema").html(data);
        pumpemod();
        send_validate();
    });

    });

Надеется, что это может помочь кому-то еще. По крайней мере, теперь я хорошо понимаю, что такое (). Я хотел перейти от livequery к on().

Источник

5 ответов

Решение

on() Функция загружает подтверждение в форме, когда я нажимаю отправить.... Итак, что происходит сейчас, форма не отправлена, но ошибки отображаются, только когда я нажимаю кнопку отправить во второй раз.

Ты прав. Плагин не инициализируется в вашей форме, пока вы не нажмете submit первый раз. Это потому, что с on(), вы просто присоединяете функцию инициализации плагина к submit событие. Неважно, как ты это делаешь, delegate, bindи т. д., ваша проблема будет такой же... вы никогда не будете правильно инициализировать плагин, пока не выполните первый щелчок.

Итак, что происходит сейчас, форма не представлена

Ваш preventDefault() блокирует нормальную отправку. Вам нужно избавиться от всего этого и просто позвонить .validate() сразу после создания HTML формы.

Есть ли способ это исправить?

Вы должны инициализировать плагин (один раз) сразу после загрузки формы с вашим ajax, Где код, который это делает? Попробуйте положить свой .validate() функция внутри complete функция обратного вызова ajax который загружает вашу форму. Это будет работать .validate() однажды по завершении ajax,

Или если вы используете JQuery.load()...

$('#content').load('form_loader', function() {
    ('#myform').validate(); // initialize plugin after form is loaded
});

Не видя вашего ajax код, грубая демонстрация ниже была быстро построена, чтобы только симулировать эту концепцию. Нажмите кнопку "Тест", чтобы загрузить форму с ajax, который затем инициализирует .validate() по завершении.

http://jsfiddle.net/dUmfK/

Вы можете увидеть, что форма загружена в div и готовы проверить до самого первого клика.

Источник

За мой комментарий

 $(document).ready(function(){
  $("#myform").on("submit",function(){
   $(this).validate();
  return false;
 });
});
Источник

Вам нужно добавить селектор в вызове on сделать делегат вместо обычного связывания:

$(document).on("submit", "#myform" function(event){
  $(this).validate();
  event.preventDefault();
});

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

Источник

У меня было что-то подобное. вот как я это решил.

У меня была та же проблема: моя цель: проверить много форм с одним и тем же классом:

мой php:

form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">

мой JS:

$('.js-validate-itemForm').each(function () {
       $(this).validate({
           submitHandler: function (form, event) { 
               doActionOnItemform(form, event);
               return false;
           }
        });
    });
Источник

Я думаю, что у вас есть неправильное написание..

Рабочий пример: http://jsfiddle.net/mFeww/4/

     $(document).ready(function(){
        $("#formID").on("submit",function(event){
            $("#myform").validate();
            event.preventDefault();
      })
});

HTML:

<form id="formID">

</form>
Источник
Другие вопросы по тегам