1

jquery formvalidation を使用するブートストラップ ブートボックス モーダル フォームに取り組んでいます。送信ボタンを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>
4

1 に答える 1