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

我想在按下提交按钮并成功完成所有操作后显示警报。我正在使用

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>

当表单验证成功时，会触发一个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> ');

});

阅读文档，当表单成功验证和提交时，会触发一个submitSuccess回调。

您可以通过添加一些样式将提醒container重新定位到左上角，并在默认情况下隐藏它，或者更好地使用引导模式：）尝试此

    <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();
          }
      });
  });

相关内容

最新更新

热门标签：