Comment empêcher le formulaire de soumettre plusieurs fois du côté client?

Question

Parfois, lorsque la réponse est lente, il est possible de cliquer plusieurs fois sur le bouton d'envoi.

Comment empêcher cela?

Answer 1

J'ai essayé la solution de vanstee avec la validation discrète asp mvc 3, et si la validation du client échoue, le code est toujours exécuté et l'envoi du formulaire est désactivé pour de bon. Je ne suis pas en mesure de soumettre à nouveau après avoir corrigé les champs. (voir le commentaire de bjan)

J'ai donc modifié le script de vanstee comme ceci:

 $("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});
 

Answer 2

Côté Client, la soumission d'un formulaire de contrôle peut être réalisé assez élégamment par avoir le onsubmit gestionnaire de masquer le bouton soumettre et de le remplacer par une animation de chargement. De cette façon, l'utilisateur obtient un retour visuel immédiat dans l'endroit même où son action (clic) qui est arrivé. Dans le même temps, vous empêcher le formulaire d'être soumis à un autre moment.

Si vous soumettez le formulaire via XHR garder à l'esprit que vous avez à gérer des erreurs de soumission, par exemple un délai d'attente. Vous devez afficher le bouton soumettre de nouveau, car l'utilisateur doit soumettre à nouveau le formulaire.

Sur une autre note, llimllib apporte un point très valable. Tous la validation d'un formulaire qui doit arriver du côté serveur. Cela inclut de multiples soumission des contrôles. Ne faites jamais confiance du client! Ce n'est pas seulement une affaire si javascript est désactivé. Vous devez garder à l'esprit que tous les côté client code peut être modifié. Il est un peu difficile à imaginer, mais le html/javascript en parler à votre serveur n'est pas nécessairement le code html/javascript que vous avez écrit.

Comme llimllib suggère, générer le formulaire avec un identificateur unique pour la forme et le mettre dans un champ caché. Magasin identifiant. Lors de la réception des données de formulaire ne traiter que lorsque l'identificateur de matchs. (Également le lien entre l'identificateur de la session des utilisateurs et la correspondance, ainsi, pour plus de sécurité.) Après le traitement de données à supprimer l'identifiant.

Bien sûr, une fois dans un certain temps, vous avez besoin de nettoyer les identifiants qui ne sont jamais toutes les données de formulaire a été soumis. Mais plus que probablement votre site web emploie déjà une sorte de "garbage collection" mécanisme.

Answer 3

Voici un moyen simple de faire cela:

 <form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>
 

Answer 4

<form onsubmit="if(submitted) return false; submitted = true; return true">