jquery validation hides submit button before check

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>

---

Try this:

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

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

---

You need to include in the .validate params object:

invalidHandler: function(){
   $('#checkoutBT').show();
},

Ref: jQuery.validate docs

---

Use onValid = function(){} with the validate plugin to call a function that hides it. I am assuming the only time this validation is used is once that submit button is pressed anyways so you don't ned an onclick event