проверка формы jquery ajaxSubmit () - PullRequest
Новая
       8

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

4 голосов
/ 17 мая 2011

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

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

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

// 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();
           }
        });
});

Ответы [ 3 ]

9 голосов
/ 17 мая 2011

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

$('#contact').ajaxForm({
  beforeSubmit: function() {
    $('#contact').validate({ /* ... */ });
    return $('#contact').valid();
  },
  success: function(resp) {
    alert(resp);
  }
});
0 голосов
/ 10 июля 2014 
<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>
0 голосов
/ 17 мая 2011

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

У вас нетЧтобы вложить два плагина, просто подтвердите первый и ajaxify второй: 

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

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

...