不允许提交多个表单

Question

我正在尝试验证 Google 验证码和我的表单，目前它确实有效。我正在使用 JQuery Forms and Validate Unobstructive。问题是提交之后，点击多少次还是可以提交的。

有没有办法确保这种情况只发生一次？

我试过使用以下方法（在代码中有注释），但是你不能再次提交表单来重新检查验证码：

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

Answer 1

你可能会禁用点击按钮只是把

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

之后

e.preventDefault();

然后，如果需要，请在操作完成后启用它

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

希望这就是您所需要的！

Answer 2

对于初学者来说，如果您实际上使用的是带有专用 <submit> 或 <button type="submit">Submit</button> 的 <form>，那么您应该监听 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();
    }
});

Answer 3

我设法通过使用 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();

不允许提交多个表单

Don't allow multiple form submissions

javascript

forms

jquery

recaptcha

unobtrusive-validation