Bootstrap- jQueryvalidator插件不能使用模態

Question

我想驗證我的表單輸入（在boostrap模式下），但它不起作用。它沒有模態效果很好，但我不知道模態有什麼問題。

當我在窗體中輸入內容並按下Redeem時，它只是重定向以形成操作屬性。這裏是我的代碼：

<div id= "promo" class= "modal fade" > 
<div class ="modal-dialog" > 
<div class = "modal-content"> 
<div class= "modal-header" > 
<button type= "button" class ="close" data-dismiss ="modal" aria-hidden ="true" >&times; </button> 
<h4 class ="modal-title"> Redeem Kwik Code</h4> 
</div> 
<div class= "modal-body" > 
<p>If you have any Kwik Code or promo code, you may enter it here to redeem free credits or free recharge. Do like us on Facebook to be updated with Kwik codes!</p> 

<script> 
$('#redeemp').validate({ 
rules: { 
    promo: { 
    required: true 
    } 
}, 
submitHandler: function (form) { 
    $.ajax({ 
     type: $(form).attr('method'), 
     url: $(form).attr('action'), 
     data: $(form).serialize() 
    }) 
    .done(function (response) { 
    $('#alert').html(response); 
    }); 
    return false; // required to block normal submit since you used ajax 
}, 
      highlight: function(e) { 
       $(e).closest(".form-group").addClass("has-error") 
      }, 
      unhighlight: function(e) { 
       $(e).closest(".form-group").removeClass("has-error") 
      }, 
      errorElement: "span", 
      errorClass: "help-block", 
      errorPlacement: function(e, t) { 
       if (t.parent(".input-group").length) { 
        e.insertAfter(t.parent()) 
       } else { 
        e.insertAfter(t) 
       } 
      } 
}); 
</script> 

<form id="redeemp" action="checkPromo.php" class="form-horizontal" method="post"> 
<div class="row"> 
<div id='display-alerts' class="col-lg-12"> 
</div> <!--alerts--> 
</div> <!--row--> 
<div class="form-group"> 
<div class="col-md-offset-3 col-md-6"> 
<input type="text" class="form-control" id="promo" placeholder="Enter code here.." name = "promo" > 
</div> <!--colmd class--> 
</div> <!--formgroup--> 
<br> 
</div> 
<div class= "modal-footer"> 
<button type= "button" class ="btn btn-danger" data-dismiss="modal" >Close</button> 
<button type="submit" class="btn btn-success submit">Redeem</button> 
</div> 
</form> 
</div> 
</div> 
</div> 

任何幫助，將不勝感激:)

P.S我已經包括了所有需要的插件文件。

Answer 1

您正在初始化表單之前的腳本。

Put all the <scripts> after the </form> 

只是：你不應該給多個元素的ID「促銷」。

這是你的工作代碼：http://jsfiddle.net/52VtD/8930/