Validation de formulaire personnalisé et envoi

Question

J'ai une validation de formulaire exécutée lorsque le bouton de soumission est sélectionné mais que je ne veux pas que la fonction de soumission par défaut s'exécute. Au lieu de cela, je veux exécuter un code postal ajax pour stocker les données dans le formulaire avec poster les données du côté serveur.

Je n'arrive pas à trouver où annuler l'envoi par défaut et ajouter le code ajax.

Voici le code validate j'ai

$("#formEnroll").validate({ 
    errorElement:"p", 
    submitHandler: function(form) { 
      var phoneNumber = form.day_phone.value;    
      var phoneParts = phoneNumber.split("-"); 
      form.dayArea.value = phoneParts[0]; 
      form.dayPrefix.value = phoneParts[1]; 
      form.daySuffix.value = phoneParts[2];    
      form.submit(); 
    } 

}); 

Et voici le code ajax je veux courir au lieu de la présentation par défaut

$.ajax({ 
    type: "POST", 
    url: "/php/localProxy.php", 
    data: $('#formEnroll').serialize(), 
    success: function (response) { 
      document.location = 'http://www.xxxx.com/thank-you'; 

    }, 
    error: function() { 
      alert('There was a problem!'); // handle error 
    } 
     }); 

Answer 1

vous pouvez appeler la fonction ajax à la place de form.submit(); form.submit(); soumettra votre code en utilisant la soumission par défaut.

$('#formEnroll').on('submit', function(e){ 
     e.preventDefault(); 

     $(this).validate({ 
      errorElement:"p", 
      submitHandler: function(form) { 
       var phoneNumber = form.day_phone.value;    
       var phoneParts = phoneNumber.split("-"); 
       form.dayArea.value = phoneParts[0]; 
       form.dayPrefix.value = phoneParts[1]; 
       form.daySuffix.value = phoneParts[2];    
       submitform(); 
      } 
     }); 
    }) 

    function submitform(){ 
    $.ajax({ 
     type: "POST", 
     url: "/php/localProxy.php", 
     data: $('#formEnroll').serialize(), 
     success: function (response) { 
       document.location = 'http://www.xxxx.com/thank-you'; 

     }, 
     error: function() { 
       alert('There was a problem!'); // handle error 
     } 
    }); 

    } 

Answer 2

Vous pouvez envelopper votre plugin validate dans une forme générique soumettre la fonction pour arrêter l'exécution standard.

$('#formEnroll').on('submit', function(e) 
{ 
    e.preventDefault(); // stop form submission 

    // Run validation 
    $(this).validate({ 
     errorElement:"p", 
     submitHandler: function(form) { 
      var phoneNumber = form.day_phone.value;    
      var phoneParts = phoneNumber.split("-"); 
      form.dayArea.value = phoneParts[0]; 
      form.dayPrefix.value = phoneParts[1]; 
      form.daySuffix.value = phoneParts[2];    
      submitform(); // call your ajax function here 
     } 
    }); 
}); 

function submitform(){ 
    $.ajax({ 
     type: "POST", 
     url: "/php/localProxy.php", 
     data: $('#formEnroll').serialize(), 
     success: function (response) { 
       document.location = 'http://www.xxxx.com/thank-you'; 

    }, 
    error: function() { 
     alert('There was a problem!'); // handle error 
    } 
}); 

Au lieu d'utiliser l'objet événement e vous pouvez aussi simplement return false; à la fin de la fonction .on pour arrêter les événements par défaut de mise à feu.

Answer 3

Vous pouvez envoyer les données par ajax en utilisant l'événement click dans le jquery en cliquant sur le bouton d'envoi et cette fonction devrait return false pour éviter la soumission par défaut par la façon dont vous pouvez envoyer les données à l'aide ajax et éviter le défaut soumission.