ASP.NET MVC - So verhindern Sie das Doppelklick mit jQuery.Validate.unoBusive LIB?

Question

Ich muss das Doppelklick -Sendenverhalten vermeiden. Ich verwende die Client -Validierung mit der unauffälligen Bibliothek. Ich habe den folgenden Code, um das Doppelclic zu vermeiden:

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

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

     jQuery('form').preventDoubleSubmit();

Wenn mein Formular einige gültige Felder enthält (z. B. ein erforderliches Feld), wird der obige Code immer noch abgefeuert. Selbst wenn ich Fehler auf dem Formular korrigiere, kann ich es nicht wieder einreichen.

Wie kann ich den Doppelklick -Code abfeuern, nachdem die Validierung erfolgreich durchgeführt wurde?

Answer 1

Ich habe es mit dem folgenden Code gelöst:

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++;
         }
     };
 });

Hinweis: Sie können auch das ersetzen:

return false;

Linie, für:

self.attr('disabled', true);

Wenn Sie jedoch den Namen Ihrer Einsendetaste auf Ihrem Controller für zusätzliche Logik verwenden, werden sie als Null gesendet. (Sie können ein zusätzliches verstecktes Feld verwenden, um diese vor dem Einreichen zu berechnen)

Das ist es, hoffe es hilft

Rodrigo

Bearbeiten: Dank dieser Beiträge:JQuery Newbie: Kombinieren Sie Validate mit Hidding Senden -Taste

Answer 2

Sie können auch die verwenden JQuery One Event.

Ich habe festgestellt, dass ich die meisten Wachen gegen Doppelklicks überwinden konnte, indem ich schnell doppelklicke. Die Verwendung des einen Ereignisses ist der einzig wahre Weg, um sicherzustellen, dass das Ereignis nur einmal abgefeuert wird. Ich glaube nicht, dass diese Technik mit einem Eingangstyp = Senden -Tag "aus der Box" funktioniert. Stattdessen können Sie einfach einen Eingangstyp = Taste verwenden oder Jqueryui's .button ().

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

Wenn Sie das Ereignis mit einem Validierungsfehler (oder anderen Umständen) erneut verkabeln müssen, empfehle ich Ihnen, eine Funktion für den Ereignishandler zu erstellen. Die Funktion ist in diesem Beispiel nicht notwendig, da der Ereignishandler das Formular einreicht, aber in komplizierteren Szenarien möchten Sie möglicherweise vermeiden, sich selbst zu wiederholen.

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); });
   }
});

Sie können den Deaktivierungscode hier offensichtlich hinzufügen, wenn Sie dem Benutzer Feedback geben möchten, dass die Schaltfläche nicht mehr funktioniert. Ein großartiger Nebeneffekt bei der Verwendung des einen Ereignisses ist, dass Sie die Taste nicht deaktiviert haben, sondern einen eigenen Stil verwenden können.

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 One Event: http://api.jquery.com/one/

Answer 3

Warum nicht einfach verwenden:

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");
    }
}

So deaktivieren Sie Ihre Schaltflächen und aktivieren Sie sie mit:

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

Answer 4

Bezogen auf Ryan Ps beliebte Antwort Ich habe die folgende generische Lösung erstellt, die auch mit meinem Ajax -Formular funktioniert.

Dekorieren Sie Ihre benutzerdefinierte Senden -Schaltfläche mit der folgenden Klasse:

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

Fügen Sie Ihre JavaScript -Datei Folgendes hinzu:

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();

Da dies ein AJAX -Formular ist, möchten wir die Handler neu laden, wenn wir die Servervalidierung nicht bestehen.

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
    }
}

Wenn Sie keine Ajax -Formulare haben, können Sie das Ganze weglassen OneClickSubmitButton Funktionsgeschäft und Lauf $('.one-click-submit-button').each(... direkt.

Answer 5

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

Answer 6

Ich habe ein Formular, das eine unauffällige MVC3 -Validierung verwendet, und ein ViewModel mit einer [remoteAttribute]. Es sieht für mich so aus, als ob das Formular -Ereignis nur Feuer feuert, nachdem die gesamte Validierung vergangen ist. Ich benutze das derzeit und es scheint zu funktionieren:

<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');
})

;

Ich legte Breakpoints sowohl auf der Remote Attribut -Validierungs -Aktionsmethode als auch auf der HTTPPOST -Aktionsmethode. Klicken Sie auf die Schaltfläche Senden beim ersten Mal trifft den Haltepunkt für die Validierungsaktionsmethode. Zu diesem Zeitpunkt ist die Taste noch aktiviert. Ich kann mehrmals darauf klicken, und nachdem ich die Validierungsmethode wieder aufgenommen habe, wird der HTTPPOST nur einmal getroffen. Wenn der HTTPPOST gedrückt wird, ist die Schaltfläche "Senden" deaktiviert.

Aktualisieren

Richtig, du bist Alex. Eine aktualisierte Version des oben genannten würde also so aussehen:

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

Answer 7

Ich benutze einen anderen Ansatz dafür. Nicht verkabelt zum Klickereignis der Schaltfläche, sondern zum Sendenereignis des Formulars. Funktioniert wie ein Zauber, um mehrere gleichzeitige Formenabschlüsse zu verhindern.

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;
            }
        }
    });
}

Auf Dokumentbereit, nenne ich InitFormStopReventSmultaneousSubMits (), um alle Formulare auf der Seite zu initieren.

Wenn Sie einen AJAX -Formular verwenden, werden Sie die InitFormStopRentSImultaneousSubMits ('#formID') auf dem OnComplete -Ereignis der Ajaxoptions -Einstellungen aufrufen. Denn sonst wird das Formular weiterhin als Senden markiert, wenn es fertig ist. Wenn ein „normaler“ Formular verwendet wird, ist dies kein Problem.

Answer 8

Erweitert Antworten von Alex und Ryan p Um Situationen zu berücksichtigen, in denen möglicherweise eine JQuery -Validierung fehlt und in denen mehrere Einreichungsschaltflächen in einer einzigen Form vorhanden sind.

oneClickSubmitButton = function () {
    $('input[type=submit], button[type=submit], input[type=image]').each(function () {
        var $theButton = $(this);
        var $theForm = $theButton.closest('form');

        //hide the button and submit the form
        function tieButtonToForm() {
            $theButton.one('click', function () {
                $theButton.addClass('ui-state-disabled');
            });
        }

        tieButtonToForm();

        $theForm.submit(function (event) {
            // Only proceed for the clicked button
            if (!$theButton.hasClass("ui-state-disabled"))
                return;

            // If jQuery Validation is not present or the form is valid, the form is valid
            if (!$theForm.valid || $theForm.valid())
                return;

            // Re-wire the event
            $theButton.removeClass('ui-state-disabled');
            event.preventDefault();
            tieButtonToForm();
        });
    });
};

Answer 9

Ich konnte ein ähnliches Problem mit ein paar Codezeilen beheben. Ich bevorzuge dies, wenn Sie dem Benutzer, den sie doppelt geklickt haben, nicht "alarmieren" möchten, und ignorieren einfach den zweiten Klick leise.

Ich habe gerade eine globale JavaScript -Variable erstellt, die ich beim Ausführen meiner Funktion während eines kritischen Abschnitts umgeschaltet habe. Dies hielt die nachfolgenden Funktionsaufrufe daran, denselben Abschnitt erneut zu entfernen.

 var criticalSection = false;

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