ASP.NET MVC - Comment éviter un double clic avec jquery.validate.unobtrusive soumettre lib?

https://stackoverflow.com/questions/4539302

13-10-2019
|

Question

Je dois éviter la double clic soumission comportement. J'utilise la validation du client avec la bibliothèque discrète. Je le code suivant pour éviter le double clic:

jQuery.fn.preventDoubleSubmit = function () {
         var alreadySubmitted = false;
         return jQuery(this).submit(function () {

             if (alreadySubmitted)
                 return false;
             else {
                 alreadySubmitted = true;
             }
         });
     };

     jQuery('form').preventDoubleSubmit();

Malheureusement, si ma forme a des champs validable (par exemple, un champ obligatoire), le code ci-dessus est encore tiré, par conséquent, même si je corrige des erreurs sur la forme, je ne serai pas en mesure de le soumettre à nouveau.

Comment puis-je tirer le code double clic après la validation a été fait avec succès?

La solution 2

Je l'ai résolu avec le code suivant:

var tryNumber = 0;
 jQuery('input[type=submit]').click(function (event) {
     var self = $(this);

     if (self.closest('form').valid()) {
         if (tryNumber > 0) {
             tryNumber++;
             alert('Your form has been already submited. wait please');
             return false;
         }
         else {
             tryNumber++;
         }
     };
 });

NOTE: Vous pouvez également remplacer le:

return false;

ligne, pour:

self.attr('disabled', true);

Mais, si vous utilisez le nom de votre soumettre les boutons de votre contrôleur pour la logique supplémentaire, ils seront envoyés comme nuls. (Vous pouvez utiliser un champ caché supplémentaire pour les charger avant de soumettre)

c'est tout, elle pourra être utile

Rodrigo

EDIT: Merci à ces messages: jquery débutant: combiner avec validate Hidding bouton soumettre

Autres conseils

Vous pouvez également utiliser le JQuery Un événement .

J'ai trouvé que je pouvais obtenir la plupart des gardes du passé contre un double-clic en double-cliquant rapide. En utilisant l'un événement est la seule vraie façon de vous assurer que l'événement est tiré seulement une fois. Je ne pense pas que cette technique fonctionne « hors de la boîte » avec un input type = soumettre balise. Au lieu de cela, vous pouvez simplement utiliser un type d'entrée = bouton ou .button de jQueryUI () .

$("#submitButton").one("click", function(event) {
   $('#theForm').submit();
});

Si vous avez besoin de recâbler l'événement sur une erreur de validation (ou d'autres circonstances), je vous recommande de créer une fonction pour le gestionnaire d'événements. La fonction n'est pas nécessaire dans cet exemple parce que tout le gestionnaire d'événements est fait soumettre le formulaire, mais dans des scénarios plus complexes, vous pouvez éviter de vous répéter.

function submitClick(event) {
   $('#theForm').submit();
}

$("#submitButton").one('click', function(event) {
   submitClick(event);
});

// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
   if (!$(this).valid()) {
      event.preventDefault();
      $('#submitButton').one('click', function(event) { submitClick(event); });
   }
});

Vous pourriez évidemment ajouter le code de désactiver ici si vous voulez donner une rétroaction à l'utilisateur que le bouton ne fonctionne plus. Un grand effet secondaire d'utiliser l'événement est que vous n'avez pas fait pour rendre le bouton désactivé, vous pouvez utiliser un style de votre propre.

function submitClick(event) {
   $('#submitButton').addClass('disabledButton');
   $('#theForm').submit();
}

$("#submitButton").one('click', function(event) {
   submitClick(event);
});

// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
   if (!$(this).valid()) {
      event.preventDefault();
      $('#submitButton').one('click', function(event) { submitClick(event); });
      $('#submitButton').removeClass('disabledButton');
   }
});

JQuery Un événement: http://api.jquery.com/one/

Pourquoi ne pas utiliser:

function disableButtons() {
    var form = $(this);
    var btns = $("input:submit", form);

    if (!form.valid()) {
        // allow user to correct validation errors and re-submit
        btns.removeAttr("disabled");
    } else {
        btns.attr("disabled", "disabled");
    }
}

pour désactiver les boutons et l'activer en utilisant:

$("form").bind("submit", disableButtons);

Basé sur réponse populaire Ryan P J'ai créé la solution générique suivante qui fonctionne aussi avec ma forme ajax.

décorer votre bouton Envoyer personnalisée avec la classe suivante:

<button type="button" class="one-click-submit-button">Submit</button>

Ajoutez ce qui suit à votre fichier javascript:

function OneClickSubmitButton() {
    $('.one-click-submit-button').each(function () {
        var $theButton = $(this);
        var $theForm = $theButton.closest('form');

        //hide the button and submit the form
        function tieButtonToForm() {
            $theButton.one('click', function () {
                $theButton.hide();
                $theForm.submit();
            });
        }

        tieButtonToForm();

        // This handler will re-wire the event when the form is invalid.
        $theForm.submit(function (event) {
            if (!$(this).valid()) {
                $theButton.show();
                event.preventDefault();
                tieButtonToForm();
            }
        });
    });
}

OneClickSubmitButton();

puisque c'est une forme ajax nous voulons recharger les gestionnaires si nous ne parvenons pas la validation du serveur.

function MyForm_OnSuccess() {
    if (true if your form passed validation logic) {
        //do something since your form submitted successfully
    } else { //validation failed on server
        OneClickSubmitButton(); //reinitialize the button logic
    }
}

Il est évident que si vous n'avez pas ajax formes, vous pouvez omettre toute activité de la fonction OneClickSubmitButton et exécuter $('.one-click-submit-button').each(... directement.

 $('form').submit(function () {
 $('input[type="submit"]', this).attr('disabled', 'disabled');
   });

J'ai un formulaire qui utilise MvC3 validation discrète, et un viewmodel avec [RemoteAttribute]. Il me semble que les années de formulaire soumettre un événement déclenche qu'après validation tout est passé. J'utilise actuellement cela, et il semble fonctionner:

<input type="submit" value="Submit the Form" 
    data-app-disable-on-submit="true" />

$('form').live('submit', function() {
    $(this).find('input[type="submit"][data-app-disable-on-submit="true"]')
                .attr('disabled', 'disabled');
})

I définie à la fois des points d'arrêt sur la méthode d'action de validation d'attribut à distance et le mode d'action HttpPost. En cliquant sur le bouton Soumettre la première fois frappe le point d'arrêt sur la méthode d'action de validation. À ce stade, le bouton est toujours activé. Je peux cliquer dessus plusieurs fois, et après avoir repris la méthode de validation, le HttpPost est frappé qu'une seule fois. Lorsque le HttpPost est frappé, le bouton d'envoi est désactivé.

Mise à jour

vous êtes Alex droit. Ainsi, une version mise à jour du serait au-dessus de ressembler à ceci:

$('form').on('submit', function() {
    $(this).find('input[type="submit"][data-app-disable-on-submit="true"]')
                .attr('disabled', 'disabled');
})

J'utilise une approche différente à ce sujet. câblage Non à l'événement clic du bouton, mais à l'événement soumettre du formulaire. Fonctionne comme un charme pour prévenir de multiples formes simultanées de soumet.

function initFormsToPreventSimultaneousSubmits(selector) {
    if (!selector) {
        selector = 'form'; // No selector supplied, apply to all forms on the page
    }

    // Make sure all forms that conform to selector are marked as not submitting
    $(selector).each(function()
    {
        var $form = $(this);
        $form.data('submitting', false);
    });

    // Attach to submit event of all forms that conform to selector
    $(selector).off('submit').on('submit', function (e) {
        var $form = $(this);

        if (!$form.valid || $form.valid()) { // Make sure to only process when the form is valid or jquery validation is not used
            if ($form.data('submitting')) {
                // form is already submitting. Classic case of double click on one of the submit buttons of the form. Stop the submit
                e.preventDefault();
                return false;
            } else {
                // All ok, mark the form as submitting and let the form perform the submit
                $form.data('submitting', true);
                return true;
            }
        }
    });
}

Le document prêt appel i initFormsToPreventSimultaneousSubmits () init toutes les formes sur la page.

La seule chose à retenir est que lorsque u utiliser un poste de formulaire ajax est d'appeler les initFormsToPreventSimultaneousSubmits ( « # formId ») sur l'événement OnComplete des paramètres AjaxOptions. Parce que sinon la forme sera toujours marquée comme la soumission quand son fait. Lorsqu'un poste de forme « normale » est utilisé ce n'est pas un problème.

Prolonge réponses par Alex et

Je suis en mesure de résoudre un problème similaire avec quelques lignes de code. Je préfère si vous ne voulez pas « alerte » à l'utilisateur qu'ils double clic et tout simplement ignorer silencieusement le deuxième clic.

Je viens de faire une variable globale javascript que je basculée quand ma fonction exécutait au cours d'une section critique. Cette fonction subséquente maintenu les appels de re-exécution de la même section.

 var criticalSection = false;

 SomeOnClickEventFired = function () {
      if (!criticalSection)
      {
            criticalSection = true;
            //Ajax Time
            criticalSection = false;
      }
 }

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow