按顺序执行jquery

时间:2014-08-30 05:05:36

标签: jquery forms jquery-validate

我有一个表单,上面有两个不同的jquery。问题是我需要先执行第一个,如果它成功执行第二个。

基本上有一个包含2个元素的表单,第一个jquery验证表单,第二个弹出一个带有Yes或No操作的确认窗口。不要简单地关闭弹出窗口,是的必须提交表单。

现在发生的事情是弹出窗口首先出现,当点击它时,它会验证表单。我需要相反,因为确认框必须包含表单中的2个元素。

我的提交按钮有id:smart-mod-eg1

任何帮助将不胜感激

感谢

我的代码:

$(document).ready(function() {

    var $formValidate = $('#form-id').validate({
        // Rules for form validation
        rules: {
            amount: {
                required: true
            },
            address: {
                required: true
            }
        },
        // Messages for form validation
        messages: {
            amount: {
                required: 'Please enter an amount'
            },
            address: {
                required: 'Please enter receiving address'
            }
        },
        // Do not change code below
        errorPlacement: function(error, element) {
            error.insertAfter(element.parent());
        }
    });

    /*
     * SmartAlerts
     */
    // With Callback
    $("#smart-mod-eg1").click(function(e) {
        $.SmartMessageBox({
            title: "Confirm!",
            content: $("#amountSending").val(),
            buttons: '[No][Yes]'
        }, function(ButtonPressed) {
            if (ButtonPressed === "Yes") {
                content: $("#form-id").submit();
            }
            if (ButtonPressed === "No") {
                $.smallBox({
                    title: "Callback function",
                    content: "<i class='fa fa-clock-o'></i> <i>You pressed No...</i>",
                    color: "#C46A69",
                    iconSmall: "fa fa-times fa-2x fadeInRight animated",
                    timeout: 4000
                });
            }
        });
        e.preventDefault();
    })
})

1 个答案:

答案 0 :(得分:1)

您需要的不是单独的点击处理程序,您需要使用验证程序的submitHandler选项

$(document).ready(function () {

    var $formValidate = $('#form-id').validate({
        // Rules for form validation
        rules: {
            amount: {
                required: true
            },
            address: {
                required: true
            }
        },

        // Messages for form validation
        messages: {
            amount: {
                required: 'Please enter an amount'
            },
            address: {
                required: 'Please enter receiving address'
            }
        },

        // Do not change code below
        errorPlacement: function (error, element) {
            error.insertAfter(element.parent());
        },

        submitHandler: function () {
            $.SmartMessageBox({
                title: "Confirm!",
                content: $("#amountSending").val(),
                buttons: '[No][Yes]'
            }, function (ButtonPressed) {
                if (ButtonPressed === "Yes") {
                    $("#form-id")[0].submit();
                }
                if (ButtonPressed === "No") {
                    $.smallBox({
                        title: "Callback function",
                        content: "<i class='fa fa-clock-o'></i> <i>You pressed No...</i>",
                        color: "#C46A69",
                        iconSmall: "fa fa-times fa-2x fadeInRight animated",
                        timeout: 4000
                    });
                }
            });
            return false;
        }
    });
})