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

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


});

Answer 2

阅读documentation成功验证并提交表单时会触发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();
          }
      });
  });

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

2 个答案: