Bootstrap和Bootstrapvalidator:成功验证后如何显示成功警报?

时间:2016-09-02 10:58:50

标签: jquery html twitter-bootstrap validation bootstrapvalidator

我正在使用bootstrap和bootstrapvalidator来验证我的表单。一切正常,但现在我想要显示警报,消息已成功发送(或重定向到success.html页面)。这是html代码的一个例子:

HTML:

<form id="order">
  <input type="text" name="name"/><br>
  <input type="text" name="email"/><br>
  <textarea name="comment"></textarea><br>
  <button type="submit" name="send" id="send">Send</button>
  <div class="alert alert-success" id="asked">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
</form>

以下是验证jquery代码的片段:

JQUERY:

      $(document).ready(function() {
        var validator = $('#order').bootstrapValidator({
            fields: {
                email : {
                    message : "Please insert Email", 
                    validators : {
                        notEmpty : {
                            message : "Insert a valid email address"
                        },
                        stringLength : {
                            min : 6,
                            max: 35,
                        }
                    }
                }
            }
    });
});

对我来说也有用的是在点击按钮后隐藏警告和显示:

JQUERY:

$(document).ready(function(){
$("#asked").hide();
});

$('#send').click(function() {
$.post('php/text.php', $('form#order').serialize());
$("#asked").show();
});

现在我想让警报显示出来,如果验证中的所有内容都是绿色的。即使$ .post方法只有在验证成功后才能工作。如何通过警报消息实现相同的目标?提前谢谢!

1 个答案:

答案 0 :(得分:0)

您应该使用“ onSuccess function ”。

你可以在这里看到: Bootstrap Validator - Alert on success validation