проверка формы jquery ajaxSubmit ()

#jquery-plugins #jquery #jquery-validate

#jquery-плагины #jquery #jquery-проверка

Вопрос:

Я очень разочарован этой проверкой формы jquery ajaxSubmit ();

В Chrome, похоже, происходит сбой, даже не нажимая на submitHandler, firefox делает, но все равно переходит к действию = «contact.php «страница. Я ожидал, что он будет просто публиковать в фоновом режиме и, возможно, возвращать результаты, но не могу заставить его работать таким образом.

Редактировать: Найдено исправление для этого, если кому-то еще интересно, поместите эту строку кода где-нибудь в вашем dom ready.

 // disable HTML5 native validation and let jquery handle it.
    $('form').attr('novalidate','novalidate');

HTML-форма:

 <form method="post" action="contact.php" id="contact">
    <fieldset>
        <input type="text" id="email" class="required email" name="email"  maxlength="30" value="youremail @ example.com" />
        <input type="text" id="subject" class="required" name="subject" maxlength="24" value="Enter your subject" />
        <textarea id="msg" class="required textarea" name="msg" cols="30" rows="5">Reason for contact.</textarea>
        <input type="submit" class="formBtn" value="Punch me an Email" />
    </fieldset>
</form>

jQuery:

 $(window).load(function(){
    $('#contact').validate({
            rules:{
                email:{required: true, email:true},
                subject:{required: true, minlength: 5},
                msg:{required: true, minlength: 50}
            },
            messages:{
                email:'',
                subject: '',
                msg: ''
            },
            invalidHandler:function(){
                $('div.error').hide();
            },
            focusInvalid:true,
            onfocusout:false,
            submitHandler: function() {
               // never hits with chrome, and alert works in FF4, 
               // but still goes to contact.php
               $('#contact').ajaxSubmit();
           }
        });
});

Ответ №1:

Я не совсем знаком с плагином проверки, но я бы попробовал наоборот, проверив форму в событии beforeSubmit плагина form в beforeSubmit:

 $('#contact').ajaxForm({
  beforeSubmit: function() {
    $('#contact').validate({ /* ... */ });
    return $('#contact').valid();
  },
  success: function(resp) {
    alert(resp);
  }
});

1. docs.jquery.com/Plugins/Validation/validate#options Я прошелся вверх и вниз по странице этого документа и сделал это так, как они показали. Даже пытался обернуть это в $ (‘#contact’).submit(функция(){}), но ничего не вышло.

2. Спасибо. Поскольку я обнаружил основную причину, по которой форма не проверяется, ваш метод работает как по волшебству.

Ответ №2:

submitHandler вызывается после запуска события отправки, таким образом ajaxForm , регистрирует свой собственный обработчик события отправки после события отправки, которое, вероятно, слишком поздно, чтобы перехватить его.

Вам не нужно вставлять два плагина, просто проверяйте первый и ajaxify вторым:

 $('#contact').validate({...});
$('#contact').ajaxForm();

Таким образом, сначала вызывается обработчик события проверки, и событие останавливается до перехода к обработчику отправки ajax, если оно недействительно.

1. что? Если вы сделаете это таким образом, скрипт попытается выполнить ajaxSubmit еще до того, как он будет проверен. По сути, он будет пытаться выполнять ajaxsubmit каждый раз, когда страница загружается или обновляется.

Ответ №3:

 <form id="Form1">    
...    
<button type="submit" onclick="return SendData()"> 
</form>

<script>

$(function () {
   $("#Form1").validate();
});

function SendData(){
   if ($("#Form1").valid()) {
      $.ajax({
         url: "/WebService/....",
         type: "post",
         dataType: "json"
         //....
      });

      //do ajax but not submit
      return false;
   }
   // checkdata
   return true;
}
</script>