Question

当用户点击以防止doulde条目时，我有一些jquery隐藏提交按钮。但是，当验证发现要纠正的问题时，提交按钮仍然会消失。

如果一切正常，我将如何隐藏提交。

            <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

您需要包含在.validate参数对象中：

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

参考：jQuery.validate docs

Answer 2

使用onValid = function（）{}和validate插件来调用隐藏它的函数。我假设唯一一次使用此验证是一次按下提交按钮，所以你不需要一个onclick事件

Answer 3

试试这个：

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

删除$('#checkoutBT').click()处理程序。

jquery验证在检查之前隐藏提交按钮

3 个答案: