J'essaie de valider Google Captcha et mon formulaire, qui fonctionne actuellement. J'utilise JQuery Forms et Validate Unobstructive. Le problème est qu'après la soumission, vous pouvez toujours soumettre le formulaire autant de fois que vous cliquez.

Existe-t-il un moyen de garantir que cela ne se produit qu'une seule fois?

J'ai essayé d'utiliser ce qui suit (commenté dans le code), mais vous ne pouvez plus soumettre le formulaire pour revérifier le captcha:

if ($form.data('submitted') === true) { } else { }

JS:

$(document).ready(function () { 
    //Intercept Submit button in order to make ajax call instead of a postback
    $('#contactForm').preventDoubleSubmission();
});

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
    $("button").click('submit', function (e) {
        e.preventDefault();

        var $form = $("#contactForm");

        $($form).bind("invalid-form.validate", function() {
            if( $("invalid-form.validate") ) {
                formErrors();
            }
        })

        // if ($form.data('submitted') === true) {
            // // Previously submitted - don't submit again
        // } else {
            if ($form.valid()) {
                // Mark it so that the next submit can be ignored
                $form.data('submitted', true);
                if ( captchaCheck() == false) {
                    captchaCheck();
                } else {
                    // Make ajax call form submission
                    $.ajax({
                        url: $form.attr('action'),
                        type: 'POST',
                        cache: false,
                        data: $form.serialize(),
                        success: function (result) {
                            success();
                        }
                    });
                }   
            }
        // }        
    });

    // keep chainability
    return this;
};

function hover() {
  $(".contour-button").on("mouseenter", function() {
    return $(this).addClass("hover");
  });
}

function hoverOff() {
  $(".contour-button").on("mouseleave", function() {
    return $(this).removeClass("hover");
  });
}

function success() {
    $(".contour-button").addClass("success");
    var formFields = $(".contactForm input, .contactForm textarea, .contactForm button");
    $(formFields).attr('disabled', 'disabled');
    $(formFields).animate({'opacity':'0.5'});
    $(".contour-btn-arrow").addClass("contour-btn-success");
    $(".contour-button .submit").html("Thank you for your enquiry");
}

function formErrors() {
    $(".contour-button").addClass("form-errors").delay(3500).queue(function(){
        $(this).removeClass("form-errors").dequeue();
    });
    $(".contour-btn-arrow").addClass("contour-btn-error").delay(3500).queue(function(){
        $(this).removeClass("contour-btn-error").dequeue();
    });
    $(".contour-button .submit").html("There are errors on the form").delay(3500).queue(function(){
        $(this).html("Submit").dequeue();
    });
}

function captchaCheck() {
    var captchaResponse = grecaptcha.getResponse();
    if(captchaResponse.length == 0) {
        // html for the captcha error message
        var captchaMsgHtml = '<img src="/images/form-error-icon.png" /> Please check the captcha and try again';

        $("#captchaMsg").html(captchaMsgHtml).slideDown(500);
        $(".g-recaptcha div div").addClass("recaptchaHighlight");
        return false;
    } else {
        $(".g-recaptcha div div").removeClass("recaptchaHighlight")
        $("#captchaMsg").hide();
        return true;
    }
}

hover();
hoverOff();
0
Madness 9 mars 2016 à 19:06

3 réponses

Meilleure réponse

J'ai réussi à résoudre ce problème de manière similaire à la suggestion de MonkeyZeus en enveloppant l'appel AJAX dans une condition, en utilisant un bool (true / false).

var ajaxRunning = false;

$("button").click('submit', function (e) {
    e.preventDefault();

    var $form = $("#contactForm");

    $($form).bind("invalid-form.validate", function() {
        if( $("invalid-form.validate") ) {
            formErrors();
        }
    })

    if ($form.valid()) {
        if ( captchaCheck() === false) {
            captchaCheck();
            formErrors();
        } else {
            if(!ajaxRunning){
            ajaxRunning = true;
                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    cache: false,
                    data: $form.serialize(),
                    success: function (result) {
                        success();
                    },
                    error: function (result) {
                        captchaCheck();
                        formErrors();
                    }
                });
            }
        }   
    }       
});

function hover() {
  $(".contour-button").on("mouseenter", function() {
    return $(this).addClass("hover");
  });
}

function hoverOff() {
  $(".contour-button").on("mouseleave", function() {
    return $(this).removeClass("hover");
  });
}

function success() {
    var disabledElements = "#formFooter button, .contourField input, .contourField textarea";
    var opacityElements = ".contourField input, .contourField textarea";

    // disable button & inputs once submitted
    $(disabledElements).attr('disabled', 'disabled');

    // change opacity of elements
    $(opacityElements).animate({ 'opacity' : '0.5' });

    $(".contour-button").addClass("success");
    $(".contour-btn-arrow").addClass("contour-btn-success");
    $(".contour-button .submit").html("Thank you for your enquiry");
}

function formErrors() {
    $(".contour-button").addClass("form-errors").delay(3500).queue(function(){
        $(this).removeClass("form-errors").dequeue();
    });
    $(".contour-btn-arrow").addClass("contour-btn-error").delay(3500).queue(function(){
        $(this).removeClass("contour-btn-error").dequeue();
    });
    $(".contour-button .submit").html("There are errors on the form").delay(3500).queue(function(){
        $(this).html("Submit").dequeue();
    });
}

function captchaCheck() {
    var captchaResponse = grecaptcha.getResponse();
    if(captchaResponse.length == 0) {
        // html for the captcha error message
        var captchaMsgHtml = '<img src="/images/form-error-icon.png" /> Please check the captcha and try again';

        $("#captchaMsg").html(captchaMsgHtml).slideDown(500);
        $(".g-recaptcha div div").addClass("recaptchaHighlight");
        return false;
    } else {
        $(".g-recaptcha div div").removeClass("recaptchaHighlight")
        $("#captchaMsg").hide();
        return true;
    }
}

hover();
hoverOff();
0
Madness 21 mars 2016 à 12:05

Vous pouvez désactiver le bouton cliqué simplement en mettant

var that = this;
$(that).attr("disabled", true);

Après

e.preventDefault();

Puis, si vous en avez besoin, activez-le lorsque l'opération est terminée avec

//probably after success()
$(that).attr("disabled", false);

J'espère que c'est ce dont vous avez besoin!

2
AlanShearer 9 mars 2016 à 16:32

Pour commencer, si vous utilisez réellement un <form> avec un <submit> ou <button type="submit">Submit</button> dédié, alors vous devriez écouter on.('submit'):

var allowSubmit = TRUE;

$('form').on('submit', function(e)
{
    if(allowSubmit === TRUE)
    {
        allowSubmit = FALSE;

        // Perform your validations + AJAX calls and make sure to set
        // allowSubmit = TRUE; wherever appropriate

        if(validationFails)
        {
            allowSubmit = TRUE;
        }
        else
        {
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                cache: false,
                data: $form.serialize(),
                success: function (result) {
                    success();
                    allowSubmit = TRUE;
                },
                error: function() {
                    // Do some error handling

                    allowSubmit = TRUE;
                }
            });
        }
    }
    else
    {
        e.preventDefault();
    }
});
0
MonkeyZeus 9 mars 2016 à 16:40