如何在 Bootstrap 中发生事件后显示警报？

Question

我想在按下提交按钮并且一切都成功完成后显示一个警告。我正在使用

jqBootstrapValidation.js

用于验证表单是否在没有值的情况下发送的库。这是我现在拥有的代码：

<!DOCTYPE html>
<br/>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>
<body>
<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Email address</label>
        <div class="controls">
            <input type="email" required />
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Type something</label>
        <div class="controls">
            <input type="text" name="some_field" required />
            <p class="help-block"></p>
        </div>
    </div>
    <input type="submit" value="submit"/>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- or use local jquery -->
<script src="/js/jqBootstrapValidation.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>

    $(function() {
        $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
    });

</script>

<div class="container">
    <h2>Alerts</h2>
    <p>Form Successful</p>
    <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>Success!</strong> You have filled in the form correctly!
    </div>
</div>  

</body>
</html>

我希望它出现在左上角，然后在验证成功后 2 秒左右（现在是同一页面）将我重定向到另一个页面。这可能吗？

<div class="container">
    <h2>Alerts</h2>
    <p>Form Successful</p>
    <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>Success!</strong> You have filled in the form correctly!
    </div>
</div>

Answer 1

阅读 documentation 有一个 submitSuccess 回调，在成功验证并提交表单时触发。

您可以通过添加一些样式将警报 container 重新定位到左上角，并默认隐藏它或更好地使用 bootstrap 模式 :) 试试这个

    <div class="container alert-wrapper">
       .... // add alert dialog here
   </div>

 .alert-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index:999;
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    overflow:hidden;
}

  $(function () {
      $("input,select,textarea").not("[type=submit]").jqBootstrapValidation({
          preventSubmit: true,
          submitError: function ($form, event, errors) {
              // Here handle errors
          },
          submitSuccess: function ($form, event) {

              // Show your Success Message
              $(".alert-wrapper").fadeIn();

              // redirect after two seconds to other page
              window.setTimeout(function () {
                  window.location.href = "https://www.example.com";
              }, 2000);

              event.preventDefault();
          }
      });
  });

Answer 2

有一个 submitSuccess: 函数 ($form, event) 将在表单验证成功时触发。您可以在这个函数中使用警报 .. 在下面的代码中，我使用 div 来显示警报消息。

$("input,textarea").jqBootstrapValidation(
   {

       preventSubmit: true,
       submitError: function ($form, event, errors) {
           // something to have when submit produces an error ?
           // Not decided if I need it yet
       },
       submitSuccess: function ($form, event) {
           debugger;
           event.preventDefault();

 $('#divid').append('<h2>Alerts</h2> <p>Form Successful</p>    <div class="alert alert-success fadein">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> You have filled in the form correctly!
</div> ');


});

如何在 Bootstrap 中发生事件后显示警报？

How do I display an alert after an event has happened in Bootstrap?

javascript

jquery

twitter-bootstrap-3

jqbootstrapvalidation