jQuery submitHandler içinde AJAX ile doğrulama, ikinci tıklatmada sunar?

Question

AJAX'a yeni oldum ve bu SO yanıtının bir WordPress sitesindeki bir formla bütünleşmesi için jQuery Ajax POST example with PHP kodunu kullandım. İlk tıklamada doğrular Sadece iyi çalışır, ama ben

$("#my-form").validate({ 
    submitHandler: function(form) { 
    **js from other page** 
    } 
}); 

altına submitHandler işlevi yukarıdaki sayfadan Benim formu javascript yerleştirerek çalıştı jquery doğrulama

ile bütünleştirerek sorun yaşıyorum. Sonra girdiye yazıp hiçbir şey gönderilmezse, formun AJAX ile düzgün bir şekilde gönderilmesi için ikinci kez tıklamanız gerekir. Aşağıda bir jsfiddle var. Herhangi bir yardım için teşekkür ederiz.

benim bir kod jsfiddle giriş başlıkları

Answer 1

submitHandler iş biçimidir olay işleyicisi gönderme kayıt, formu göndermek getirmemektir bağlantılı değildir çünkü konsola bir hata günlüğe edeceğiz düşündüm.

Form Gönderme olayı tetiklendiğinde submitHandler çağrılır, sizin durumunuzda form gönderilmek yerine form gönderme olayı gönderildiğinde form gönderildiğinde, form gönderilmez. ilk kez tetiklendiğinde, ilk gönderim olayı, doğrulayıcı tarafından işlenir ve kaydettiğiniz işleyici, ajax isteğini tetikleyen tetiklenir. Sadece zorunda submitHandler olarak

olay işleyicisi formu göndermek değildir $("#add-form").submit(function(){...}) çağrılması

$("#add-form").validate({ 
    submitHandler: function (form) { 
     // setup some local variables 
     var $form = $(form); 
     // let's select and cache all the fields 
     var $inputs = $form.find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $form.serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
      url: "forms.php", 
      type: "post", 
      data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
      // log a message to the console 
      console.log("Hooray, it worked!"); 
      alert("success awesome"); 
      $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
      // log the error to the console 
      console.error(
       "The following error occured: " + textStatus, errorThrown); 
     }); 

     // callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 
      // reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

    } 
}); 

Answer 2

kayıt gerek yoktur ajax istekte bulundu. Kullanıcı, formu gönderdiğinde ne yapılacağını söyleyen bir işleyiciyi bağlar. Bu nedenle iki kez göndermeniz gerekir: ilk kez validate eklentisinin, verileri doğrulayan ve işlevinizi çalıştıran gönderme işleyicisini çağırır ve ikinci kez eklediğiniz gönderme işleyicisini ilk kez çağırır.

Kodu .submit() içine sarmayın, yalnızca doğrudan submitHandler: işlevinde yapın. Değişim:

var $form = $(this); 

için:

var $form = $(form); 

Sen event.PreventDefault() gerekmez, validate eklentisi sizin için de yapar.

Answer 3

$("#add-form").validate({ 
    submitHandler: function (form) { 
     var request; 
     // bind to the submit event of our form 



     // let's select and cache all the fields 
     var $inputs = $(form).find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $(form).serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
       url: "forms.php", 
       type: "post", 
       data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
       // log a message to the console 
       console.log("Hooray, it worked!"); 
       alert("success awesome"); 
       $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
       // log the error to the console 
       console.error(
        "The following error occured: " + textStatus, errorThrown); 
     }); 

      // callback handler that will be called regardless 
      // if the request failed or succeeded 
     request.always(function() { 
       // reenable the inputs 
       $inputs.prop("disabled", false); 
     });    

    } 
});