ASP.NET MVC - ¿Cómo evitar la doble clic presentar con lib jquery.validate.unobtrusive?

Question

necesito para evitar la doble comportamiento haga clic en Enviar. Estoy usando la validación del cliente con la biblioteca discreta. Tengo el siguiente código para evitar la doble clic:

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

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

     jQuery('form').preventDoubleSubmit();

Por desgracia, si mi forma tiene algunos campos validable (por ejemplo, un campo obligatorio), el código anterior se sigue disparado, por lo tanto, incluso si corregir cualquier error en el formulario, no voy a ser capaz de enviarlo de nuevo.

¿Cómo puedo disparar el código haga doble clic después de la validación se ha realizado con éxito?

Answer 1

Lo resuelto por el código siguiente:

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: También puede reemplazar el:

return false;

línea, para:

self.attr('disabled', true);

Pero, si se utiliza el nombre de tus presentar botones del dispositivo para la lógica adicional, que se enviarán como nulo. (Se puede utilizar un campo oculto adicional para cargarlas antes de enviar)

eso es todo, espero que ayude

Rodrigo

EDIT: Gracias a estos mensajes: jQuery novato: combinar validar con HIDDING botón de enviar

Answer 2

También puede utilizar el jQuery Un evento .

he encontrado que hasta ahora la mayoría de los guardias contra hace doble clic haciendo doble clic rápido. Utilizando el evento es la única manera verdadera para asegurarse de que el evento sólo se disparó una vez. No creo que esta técnica funcionará "fuera de la caja" con un tipo de entrada = submit etiqueta. En su lugar, sólo tiene que utilizar un tipo de entrada = botón o .button de jQueryUI () .

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

Si es necesario volver a cablear el caso de un error de validación (o cualquier otra circunstancia), recomiendo que se crea una función para el controlador de eventos. La función no es necesaria en este ejemplo porque todo el controlador de eventos que hace es enviar el formulario, pero en escenarios más complicados es posible que desee evitar la repetición de sí mismo.

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

obviamente, podría añadir el código de desactivación de aquí si se quería dar retroalimentación al usuario que el botón no funciona más. Una gran efecto secundario de usar el caso es que uno no tiene que realmente hacer que el botón desactivado, se puede utilizar un estilo propio.

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

¿Por qué no usar:

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

para desactivar los botones y que se active el uso de:

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

Answer 4

En base a la respuesta popular de Ryan P creé la siguiente solución genérica que también trabaja con mi forma de ajax.

adornar su encargo botón de enviar con la clase siguiente:

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

Añadir lo siguiente a su archivo 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();

ya que esta es una forma ajax queremos volver a cargar los controladores si no la validación del servidor.

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

Obviamente, si usted no tiene ajax formas se puede omitir todo el negocio OneClickSubmitButton función $('.one-click-submit-button').each(... y ejecutar directamente.

Answer 5

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

Answer 6

Tengo un formulario que utiliza MvC3 validación discreto, y un modelo de vista con un [RemoteAttribute]. A mi me parece como los formularios de presentar eventos sólo se desencadena después de todo, la validación ha pasado. Actualmente estoy usando esto, y parece que funciona:

<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 establecer puntos de interrupción en tanto el método de acción validación atributo remoto y el método de acción HttpPost. Al hacer clic en el botón de enviar la primera vez que golpea el punto de interrupción en el método de acción de validación. En este punto, el botón sigue activado. Puedo hacer clic varias veces, y después de reanudar el método de validación, el HttpPost se golpea una sola vez. Cuando el HttpPost es golpeado, el botón de envío está desactivada.

Actualizar

Tienes razón Alex. Así que una versión actualizada de lo anterior sería el siguiente:

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

Answer 7

Yo uso un enfoque diferente a este. No cableado al evento clic del botón, pero para el caso de envío del formulario. Funciona como un encanto para prevenir múltiples somete simultáneas de formas.

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

El documento initFormsToPreventSimultaneousSubmits llamada i listas () para inicializar todas las formas en la página.

Lo único a tener en cuenta es que cuando u usar una forma ajax post es para llamar a los initFormsToPreventSimultaneousSubmits ( '# formid') en el caso de la configuración OnComplete AjaxOptions. Porque de lo contrario la forma todavía se marcará como la presentación cuando su hecho. Cuando se utiliza una forma 'normal' puesto que esto no es un problema.

Answer 8

Alex y Ryan P a las cuentas para situaciones en las que jQuery Validación posible que falte y donde múltiples botones de envío existe en un único formulario.

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

yo era capaz de solucionar un problema similar con un par de líneas de código. Yo prefiero esto si no quiere "alerta" para el usuario que se hace doble clic en silencio y simplemente ignoran el segundo clic.

Me acaba de hacer una variable javascript mundial que toggled cuando mi función se ejecuta durante una sección crítica. Esta función posterior guardado llamadas de volver a ejecutar la misma sección.

 var criticalSection = false;

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