using jQuery Validation with Bootbox

Question

I am trying to get the jQuery validation plugin to work with bootbox.js (modals).

I have a form in the modal with the fields in it that need to be validated.

I have created a jsFiddle of my setup here: http://jsfiddle.net/rDE2q/

When you click on the create session button in the modal, it should be validating the form but it is not.

Here is my code:

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

Use only id of the form!

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