Question

我想验证我的表单输入（在boostrap模式中），但它不起作用。它没有模态但效果很好，但我不知道模态是什么。

当我在表单中输入内容并按下“兑换”时，它只会重定向到表单操作属性。这是我的代码：

<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>

Just：你不应该为多个元素提供ID“promo”。

以下是您的工作代码：http://jsfiddle.net/52VtD/8930/

Bootstrap- jQueryvalidator插件不适用于模态

1 个答案: