Question

I have the following code for the jQuery validation plugin…. basically on submit, I slide everything up & fade it out… the only problem is, if you’re quick enough, you can submit the form multiple times. How can I make sure that any presses of the enter key on the input (or clicks on that submit button) will not submit further?

Basically what happens, is that the form will load up the url in the action attribute when no javascript is there, so purely unbinding doesn’t work… (even if it did, I can always press enter / click fast enough to get it to do a couple more….)

jQuery('.desired').validate({
    debug: true,
    rules: {
        email: {
            required: true,
            email: true
        }
    },
    wrapper: "div",
    messages: {
        email: "Please enter a valid email address."
    },
    errorPlacement: function(error, element) {
        error.hide().appendTo(element.parent()).hide().slideDown();
    },
    errorClass: 'help-text',
    submitHandler: function(form) {

        var $ = jQuery;

        var url   = $(form).attr('action');
        var query = $(form).serialize();

        $.ajax({
            url: url,
            type: "POST",
            data: query,
            success: function() {


                $("<p class='help-jquery'><b>Thanks</b>")
                    .insertAfter(jQuery(form))
                    .css('height', function(i,h) {
                        $(this).hide()
                        return h;
                    });

                // $(form).css('height', $(form).height());
                $(form).slideUp('slow');
                $(form).fadeOut({ queue: false, duration: 'slow' });


                // $('.help-jquery').fadeIn('slow');

                $('.help-jquery')
                    .css('opacity', 0)
                    .slideDown('fast')
                    .animate(
                        { opacity: 1 },
                        { queue: false, duration: 'slow' }
                    );

                //$('.desired submit').click(function(){
                    //return false;
                //});
            },
            error: function() {
                console.log('Error: did not submit properly');
            },
            complete: function(e) {
                //$('.desired').unbind('submit');
                //e.preventDefault();
                //return false;
            }
        });


    },
    success: function(error,element){
    },
    highlight: function(error){
        // This empty function needs to be here for this to work
    }

});

Answer 1

You’re on the right track with unbind(), it solves half of your problem because it will effectively suppress validation on form submission.

To solve the second half, you only have to neuter the form’s submit event after unbinding, by registering the appropriate handler:

$(form).unbind("submit").submit(function() {
    return false;
});