javascript - 将 jQuery 验证与 Bootbox 结合使用

Question

我正在尝试让 jQuery 验证插件与 bootbox.js(模态)一起使用。

我在模式中有一个表单，其中包含需要验证的字段。

我在这里创建了我的设置的 jsFiddle:http://jsfiddle.net/rDE2q/

当您单击模式中的“创建 session ”按钮时，它应该验证表单，但事实并非如此。

这是我的代码:

$("[name=newSession]").click(function() {
        bootbox.dialog({
            title: '<i class="fa fa-cog"/></i>&nbsp;&nbsp;New Session',
            buttons: {
                close: {
                    label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
                    className: "btn-danger",
                    callback: function() {}
                },
                doAdd: {
                    label: '<i class="fa fa-check"></i>&nbsp;&nbsp;Create Session',
                    className: "btn-primary",
                    callback: function() {

                            //Validation
                            $('[name=newSessionForm]').validate({
                                debug: true,
                                rules: {
                                    sessionName: {
                                        required: true,
                                    },
                                    startDate: {
                                        required: true,
                                    }
                                },
                                messages: {
                                    sessionName: "Please enter a session name"
                                },
                                highlight: function(a) {
                                    $(a).closest(".form-group").addClass("has-error");
                                },
                                unhighlight: function(a) {
                                    $(a).closest(".form-group").removeClass("has-error");
                                },
                                errorElement: "span",
                                errorClass: "help-block",
                                errorPlacement: function(a, b) {
                                    if (b.parent(".input-group").length) a.insertAfter(b.parent()); else a.insertAfter(b);
                                },
                                submitHandler: function() {}
                            });



                        return false;
                    }
                }
            },
            message: '<form role="form" name="newSessionForm" id="newSessionForm">          <div class="form-group">    <label for="sessionName" class="text-primary">Session Name</label>    <input type="text" class="form-control" id="sessionName" name="sessionName" placeholder="Session Name" required>  </div>  <div class="form-group">    <label for="startDate" class="text-primary">Start Date</label>    <input type="text" class="form-control date" id="startDate" placeholder="Start Date">  </div>  <div class="form-group">    <label for="endDate" class="text-primary">End Date</label>    <input type="text" class="form-control date" id="endDate" placeholder="End Date">  </div></form>'
        });
    });

Answer 1

使用.validate({...}).form()。更新了你的jsfiddle:http://jsfiddle.net/rDE2q/94/