Question

我试图让jQuery验证插件与bootbox.js（模态）一起使用。

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

我在这里创建了一个jsFiddle：http://jsfiddle.net/rDE2q/

当您单击模态中的创建会话按钮时，它应该验证表单但不是。

这是我的代码：

$("[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

仅使用表单的ID！

$(document).ready(function (){
     $("#YourIdForm").validate();
});

Answer 2

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

在Bootbox中使用jQuery验证

2 个答案: