2010-08-01 8 views
0

J'utilise la jquery pour valider chaque champ de mon formulaire et également utiliser jquery pour afficher un message de "chargement" après la soumission du formulaire. Maintenant, dans mon cas, je suis confus lorsque j'ai cliqué sur le bouton «Soumettre», les messages de validation seront affichés ainsi que le message de chargement. J'ai seulement besoin que le message de chargement soit affiché une fois que tout est correct.Message jquery pour la validation et la soumission

<html lang="en"> 
    <head> 
     <title>SO question 3377468</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#form').submit(function() { 
        $('#progress').show(); 
       }); 
      }); 
     </script> 
     <style> 
      #progress { 
       display: none; 
       color: green; 
      } 
     </style>    
    </head> 
    <body> 
     <form id="form" action="servlet-url" method="post"> 
      ... 
      <input type="submit"> 
     </form> 
     <div id="progress">Please wait...</div> 
    </body> 
</html> 

How to show jquery message after clicking on submit button

Je pris ce code lorsque l'un des collègues avaient aidé et maintenant je veux terminer ce sujet.

+0

Où est votre code de validation? – Jhong

Répondre

0

Peut-être quelque chose comme:

<input type="button" value="SUBMIT" onclick="validateFunction()"> 

Puis dans votre validateFunction, à la fin si elle est tout bon pour aller ensuite appeler document.form.submit() qui traitera votre boîte de dialogue de chargement et envoyer le formulaire. En outre, comme vous avez indiqué que vous utilisez jquery pour la validation, avec votre configuration actuelle, une personne avec javascript disabled peut toujours envoyer des données invalides (provoquant toutes sortes de drop tables et autres joyeusetés). Avec cette méthode (le submit étant appelé dans le script), ils ne pourront pas envoyer AT ALL.

Une autre voie est:

<input type="submit" onclick="validateFunction();return false;"> 

Et à la fin de votre fonction de validation définie pour renvoyer (vrai/faux) s'il est correct d'envoyer ou non. Puis re-validez sur le côté serveur, en utilisant PHP ou autre et renvoyez une erreur si des problèmes surviennent. Cela permet aux utilisateurs sans javascript de toujours tenter d'envoyer mais de ne pas les détruire votre site.

+0

Je suggérerais de mettre un .click sur ce bouton de soumission, plutôt que de placer l'appel de la fonction onclick dans l'attribut d'entrée lui-même. Facilite le débogage du code. – Chris

+0

Encore j'ai eu les deux messages – maas

1

Si vous utilisez le validation plugin (je ne comprends pas la question, mais il est étiqueté de cette façon), déplacez votre code un peu. Au lieu de cela:

$(document).ready(function() { 
    $('#form').submit(function() { 
     $('#progress').show(); 
    }); 
}); 

Vous voulez utiliser le submitHandler option du plug-in, cette fonction ne redémarrera qu'après une forme a avec succès la validation et passé est soumis, comme ceci:

$("#form").validate({ 
    //other options... 
    submitHandler: function() { 
    $('#progress').show(); 
    } 
}); 

Cela signifie simplement supprimer ce premier bloc de code, le code submitHandler est tout ce que vous devriez avoir laissé pour les choses #progress.

2

La réponse de Nick a presque fonctionné pour moi - mais je pense vous devez également soumettre alors la forme ...

$(document).ready(function(){ 
    $("#form").validate({ 
     //other options... 
     submitHandler: function() { 
      $('#progress').show(); 
      form.submit(); 
     } 
    }); 
}); 
+0

Ce serait mieux comme un commentaire à l'autre réponse. –

Questions connexes