ASP.NET MVC - Come prevenire doppio click presentare con lib jquery.validate.unobtrusive?

Question

ho bisogno di evitare la doppia comportamento del clic richiedente. Sto utilizzando la convalida del client con la libreria discreto. Ho il seguente codice per evitare la doppia clic:

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

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

     jQuery('form').preventDoubleSubmit();

Purtroppo, se la mia forma ha alcuni campi validabile (ad esempio, un campo obbligatorio), il codice di cui sopra è ancora in fase licenziato, quindi, anche se io correggere eventuali errori sul modulo, non sarà in grado di presentarla ancora una volta.

Come posso licenziare il codice doppio click dopo la convalida è stato fatto con successo?

Answer 1

ho risolto con il seguente codice:

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

NOTA: È anche possibile sostituire il:

return false;

Linea, per:

self.attr('disabled', true);

MA, se si utilizza il nome dei pulsanti presentare sul controller per la logica in più, saranno inviati come nullo. (È possibile utilizzare un campo nascosto aggiuntivo per caricarli prima di inviare)

Questo è tutto, spero che aiuta

Rodrigo

EDIT: Grazie a questi messaggi: jquery newbie: combinare validate con Hidding pulsante di invio

Answer 2

È inoltre possibile utilizzare il JQuery Un evento .

ho scoperto che avrei potuto ottenere passato la maggior parte delle protezioni contro doppio click facendo doppio clic veloce. Utilizzando l'unico evento è l'unico vero modo per assicurarsi che l'evento viene generato solo una volta. Non credo che questa tecnica funziona "out of the box", con un input type = submit tag. Invece, si può semplicemente utilizzare un input type = tasto o apri un di jQueryUI () .

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

Se avete bisogno di ricablaggio l'evento su un errore di convalida (o altra circostanza), vi consiglio di creare una funzione per il gestore di eventi. La funzione non è necessaria in questo esempio, perché tutto il gestore di eventi fa è inviare il modulo, ma in scenari più complessi si consiglia di evitare di ripetere se stessi.

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

Si potrebbe, ovviamente, aggiungere il codice disabilitando qui se si voleva dare feedback all'utente che il pulsante non funziona più. Un grande effetto collaterale di utilizzare l'evento Uno è che in realtà non è necessario rendere il pulsante disabilitato, è possibile utilizzare uno stile tutto tuo.

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

Answer 3

Perché non usare:

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

per disabilitare i pulsanti e per attivarla utilizzando:

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

Answer 4

In base alla risposta popolare Ryan P ho creato la seguente soluzione generica che funziona anche con la mia forma ajax.

decorare la vostra abitudine pulsante di invio con la seguente classe:

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

Aggiungi il seguente al file 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();

dal momento che questa è una forma ajax vogliamo ricaricare i gestori se non riusciamo convalida del server.

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

Ovviamente se non si dispone di ajax forme è possibile omettere direttamente l'intero OneClickSubmitButton attività funzione $('.one-click-submit-button').each(... ed eseguire.

Answer 5

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

Answer 6

Ho un modulo che utilizza la convalida MVC3 discreto, e un ViewModel con un [RemoteAttribute]. Sembra a me come la forma della pubblica un evento spara solo dopo che tutta la convalida è passato. Attualmente sto usando questo, e sembra funzionare:

<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 punti di interruzione impostato sia sul metodo d'azione convalida attributo remoto e il metodo dell'azione HttpPost. Facendo clic sul pulsante di invio per la prima volta colpisce il punto di interruzione sul metodo di azione di convalida. A questo punto, il pulsante è ancora abilitato. Posso clic su di esso più volte, e dopo aver recuperato il metodo di convalida, il HttpPost viene colpito solo una volta. Quando il HttpPost è colpito, il pulsante di invio è disabilitato.

Aggiorna

Hai ragione Alex. Quindi, una versione aggiornata di quanto sopra sarebbe simile a questa:

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

Answer 7

Io uso un approccio diverso a questo. Non cablaggio per l'evento click del pulsante, ma per l'evento Invia del modulo. Funziona come un fascino per prevenire molteplici sottomette simultanee di forme.

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

Il documento pronto initFormsToPreventSimultaneousSubmits chiamata i () per init tutte le forme nella pagina.

L'unica cosa da ricordare è che quando u utilizzare un post modulo ajax è quello di chiamare i initFormsToPreventSimultaneousSubmits ( '# formid') sull'evento OnComplete delle impostazioni AjaxOptions. Perché altrimenti il ??modulo sarà ancora contrassegnato come la presentazione quando il suo fare. Quando si utilizza un post forma 'normale' questo non è un problema.

Answer 8

Estende risposte da Alex e Ryan P per conti per le situazioni in cui jQuery convalida potrebbe essere mancante e dove più pulsanti presentare esiste in un unico modulo.

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

Sono stato in grado di risolvere un problema simile con un paio di righe di codice. Preferisco questo se non si vuole "allerta" per utente che doppia cliccato e proprio silenzio ignorare il secondo clic.

Ho appena fatto una variabile JavaScript globale che ho attivato quando la mia funzione è stata in esecuzione durante una sezione critica. Questa funzione successiva mantenuto chiamate da ri-eseguendo la stessa sezione.

 var criticalSection = false;

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