부트 스트랩 - jQueryvalidator 플러그인이 모달과 작동하지 않습니다.

Question

(부울랩 모달에서) 양식 입력의 유효성을 검사하고 싶지만 작동하지 않습니다. 그것은 모달없이 훌륭하게 작동하지만 모달과 무엇이 옳은지 나는 알지 못합니다.

양식에 내용을 입력하고 사용을 누르면 동작 특성 양식으로 리디렉션됩니다. 어떤 도움을 주시면 감사하겠습니다

<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 "promo"를 부여하면 안됩니다. 여기

당신의 작업 코드 : http://jsfiddle.net/52VtD/8930/