2017-09-13 4 views
2

J'ai une soumission de formulaire en utilisant jQuery & PHPMailer(). Si des erreurs existent, elles s'afficheront au-dessus du formulaire, par exemple "Nom est un champ obligatoire". Toutefois, lorsque toutes les zones sont remplies correctement, le formulaire affiche une boîte alert alert-danger vide en haut et n'est pas envoyé.jQuery formulaire ajax ne pas soumettre quand aucune erreur n'existe

jQuery

var form = jQuery("#contact-form"); 
form.submit(function(e) { 
    e.preventDefault(); 
    jQuery('#submit').attr("disabled", true); 
    jQuery.ajax({ 
     url:  '/process-contact.php', 
     type:  'POST', 
     data:  form.serialize(), 
     dataType: 'json' 
    }).done(function(data) { 
     jQuery('#messages').removeClass(); 
     if (data.code === 1) { 
      form[0].reset(); 
      jQuery('#messages').addClass('alert alert-success'); 
      jQuery('#submit').attr("disabled", false); 
     } 
     else { 
      jQuery('#messages').addClass('alert alert-danger'); 
      jQuery('#submit').attr("disabled", false); 
     } 
     jQuery('#messages').html(data.message); 
     jQuery('html, body').animate({ 
      scrollTop: jQuery("#messages").offset().top 
     }, 1000); 
    }); 
}); 

HTML

<form class="contactForm" id="contact-form" name="contact-form"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
      <div class="form-group"> 
       <label for="name">Name</label> 
       <input class="form-control" id="name" name="name" placeholder="Your Name" type="text"> 
      </div> 
      <div class="form-group"> 
       <label for="email">Email Address</label> 
       <input class="form-control" id="email" name="email" placeholder="Your Email" type="text"> 
      </div> 
      <div class="form-group"> 
       <label for="subject">Subject</label> 
       <input class="form-control" id="subject" name="subject" placeholder="Subject" type="text"> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
      <div class="form-group"> 
       <label for="name">Message</label> 
       <textarea class="form-control" name="message" placeholder="Message"></textarea> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <button class="btn btn-skin pull-right" name="submit" id="submit" type="submit">Send Message</button> 
     </div> 
    </div> 
</form> 
+0

où vient cette case 'alerte-danger' alerte vient? pas dans le code que vous avez * montré * –

+0

Vous pouvez consoler.log les données, et voir ce qu'il y a dedans. L'erreur réside probablement dans la gestion des formulaires, pas dans le JS. – niorad

+0

@JaromandaX son dans un div au-dessus du formulaire,

, c'est où les messages d'erreur/succès apparaissent – user7723458

Répondre

0

Retirez la classe alert-danger après chaque clic

form.submit(function(e) { 
jQuery('#messages').removeClass('alert-danger'); 
........