使用jQuery驗證與Bootbox

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(); 
});