Question

我正在使用jquery formvalidation的bootstrap bootbox模式表单。我需要将提交按钮放在 modal-footer 中，并在提交时通过formvalidation插件进行验证并执行Ajax提交。

下面是我的代码，当按下按钮 submit1 时，它正常工作，但按钮位于模态体内。当我使用模态页脚上的 submit2 按钮提交表单时，它会关闭模态而不做任何事情。

Submit1 按钮需要在modal-footer内部或 Submit2 按钮进行验证。需要你的帮助。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="../library/bootstrap/css/bootstrap.min.css"/>
</head>

<body>
<button id="btnClick">Click Me</button>

<!-- reservation Dialog -->
<form id="reservation" method="post" class="form-horizontal" style="display:none;">

    <div class="form-group">
        <label class="col-xs-3 control-label">Title</label>

        <div class="col-xs-7">
            <input type="text" class="form-control" id="title" name="title"/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Name</label>

        <div class="col-xs-7">
            <input type="text" class="form-control" id="name" name="name"/>
        </div>
    </div>

    <div class="form-group">
        <button id="Submit1" type="submit" class="btn btn-info">Submit1</button>
    </div>

</form>

<script src="../library/jquery/jquery-2.1.4.min.js"></script>
<script src="../library/bootstrap/js/bootstrap.min.js"></script>
<script src="../library/formvalidation/formValidation.min.js"></script>
<script src="../library/formvalidation/formValidation.bootstrap.min.js"></script>
<script src="../library/bootBox/bootbox.min.js"></script>
<script >
    $(document).ready(function(){

        var reservation = $('#reservation');

        $('#btnClick').on('click',function(){
            bootbox.dialog({
                title: 'Edit Reservation',
                message: reservation,
                size: 'large',
                show: false,
                buttons: {
                    Submit2: {
                        label: "Submit2",
                        className: "btn-success",
                        callback: function(e) {
                            e.preventDefault();
                            console.log('Submit Clicked');
                        }
                    }
                }

            }).on('shown.bs.modal',function () {
                reservation
                    .show()                     // Show the login form
                    .formValidation('resetForm', true); // Reset form

            }).on('hide.bs.modal',function (e) {

                reservation.hide().appendTo('body');
            }).modal('show').find("div.modal-dialog").css('width','900px');
            reservation.show();

        });

        reservation.formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                title: {
                    validators: {
                        notEmpty: {
                            message: 'The title is required'
                        }
                    }
                }, name: {
                    validators: {
                        notEmpty: {
                            message: 'Please select type'
                        }
                    }
                }
            }

        }).on('success.form.fv', function (e) {
            e.preventDefault(); // Prevent form submission

            var $form = $(e.target);

            // Use Ajax to submit form data
            console.log("ajax submit");
        });


    });

</script>

</body>
</html>

在启动框中提交FormValidation表单

0 个答案: