jquery validate необходимо нажать кнопку отправить дважды, чтобы отправить форму

Question

У меня есть форма в модальном формате, пользователь должен заполнить форму (в противном случае валидация отобразит необходимые сообщения об ошибках полей), затем нажмите кнопку ввода типа ввода, ничего не делает , затем они снова нажимают на него, затем отправляют через ajax и возвращают сообщение «спасибо».

Я осмотрел Stackoverflow и применил ответы на проблему, которую у меня есть, но я все еще не могу заставить ее работать. Я удалил event.preventDefault(); из него, а также $ ("# review-form"). submit (function (event) {и форма отправляется как следует после нажатия на ввод ввода один раз, но не публикуется в базе данных.

Ниже JQuery для # смотре-формы

$("#review-form").validate({ 
    submitHandler: function() { 
     $("#review-form").submit(function (event) { 
      var rating = $(this).find('input[name=rating]'); 
      // var rating = $(this).find('input[name=rating]').val(); 
      var review = $(this).find('textarea[name=review]'); 
      var form_settings = $(this).find('input[name=form_settings]'); 
      var xid = $(this).find('input[name=XID]'); 
      var entry_id = $(this).find('input[name=entry_id]'); 
      var entry_type = $(this).find('input[name=entry_type]'); 
      var site_id = $(this).find('input[name=site_id]'); 
      var first_name = $(this).find('input[name=first_name]'); 
      var middle_initial = $(this).find('input[name=middle_initial]'); 

      $.ajax({ 
       url: $("#review-form").attr("action"), //your server side script 
       data: $(this).serialize(), 
       type: 'POST', 
       success: function (data) { 
        //$('#response').append('<li>' + data + '</li>'); 
        $('#review-form').hide(); 
        $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
       }, 
       error: function (jxhr, msg, err) { 
        $('#response').append('<li style="color:red">' + msg + '</li>'); 
       } 
      }); 
      event.preventDefault(); 
     }); 
    } 
}); 

UPDATE:. Я удалил $ ("# обзор-форма") представляет (функция (событие) {}), и я изменил $ (это) .find ... и извлекается, указав идентификатор формы в # form-review, а затем через параметр данных. Я прокомментировал все отдельные переменные и просто передал $ (this) .serialize() в параметр данных, и это сделало не работает.

ниже код работает в хроме и светлячок, но в Firefox, она закрывает модальное и перенаправляет на главную страницу домена, он должен держать модальный открытым с благодарственное Msg, как это делает в хроме:

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), //your server side script 
      data: $("#review-form").serialize(),     
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 

     event.preventDefault(); 
    } 
}); 

Заключительный рабочий продукт:

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), 
      data: $("#review-form").serialize(), 
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 
    } 
}); 

Answer 1

Вы связывание нового обработчика событий submit, в submitHandler обратного вызова плагина. Этот обработчик не будет запускаться сразу, потому что событие отправки уже выполняется.

Это не нужно. submitHandler обратного вызова уже preventDefault внутренне в код плагина

Удалить этот

$("#review-form").submit(function(event) { })

и держать весь код, он содержит непосредственно в submitHandler

Поскольку вы используете serialize() для данных ... вам не нужны все отдельные полевые переменные, которые вы создаете либо

Answer 2

У меня была такая же проблема и решить ее, добавив следующее в мой Validate:

$("#myform").validate({ 
    onfocusout: false 
}); 

onfocusout удалит фокус из ваших полей формы и кнопка отправки будет работать на первом щелчке.

Смотри на https://jqueryvalidation.org/validate/