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/