Question

I have some jquery to hide the submit button when the user clicks to prevent doulde entries. However when the validation finds an issue to be corrected the submit buttons disappears anyway.

How would I hide the submit only once all is ok.

            <script type="text/javascript">
            /*
            $.validator.setDefaults({
                submitHandler: function() { alert("submitted!"); }
            });*/

            $().ready(function() {

                // validate signup form on keyup and submit
                $("#signupForm").validate({
                    rules: {
                        'data[User][email]': {required: true, email: true},
                        'data[User][firstname]': {required: true},
                        'data[User][surname]': {required: true},
                        'data[User][address1]': {required: true},
                        'data[User][city]': {required: true},
                        'data[User][state]': {required: true},
                        'data[User][phone]': {required: true, digits: true},
                        'user_terms': 'required',
                        'data[User][card_type]': {required: true},
                        'data[User][card_number]': {required: true, creditcard: true},
                        'data[User][card_type]': {required: true},
                        'data[User][card_name]': {required: true},
                        'data[User][card_cvv]': {required: true,digits: true, minlength: 3, maxlength:3 },
                        'data[User][card_expires]': {required: true}


                    },
                    messages: {
                        UserEmail: {required: "Please enter a valid email address"},
                        UserFirstname: {required: "Please enter your firstname"},
                        UserSurname: {required: "Please enter your lastname"},
                        UserAddress1: {required: "Please enter your Address"},  
                        UserCity:       {required: "Please enter your City"},
                        UserState:      {required: "Please enter your State"},
                        UserPhone:      {required: "Please enter your Phone"},
                        user_terms:         'You must agree to the terms and conditions',
                        UserCardType:       {required: "Please select your Card Type"},

                    },
                    errorPlacement: function(error, element) {
                            error.appendTo( element.parent().next() );
                    }
                });

            $(document).ready(function() {
                $(".cbox").colorbox({width:"90%", height:"90%"});
            });

            // Hide submit button once pressed to prevent double entry
            $('#checkoutBT').click(function(){
                $(this).hide();
            });         

            });
            </script>

Answer 1

Try this:

$("#signupForm").validate({
    rules: { /* ... */ },
    messages: { /* ... */ },
    errorPlacement: function(error, element) { /* ... */ },
    submitHandler: function(form) {
        $('#checkoutBT').hide();
        form.submit();
    }
});

And remove the $('#checkoutBT').click() handler.