0

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

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

2 回答 2

3

有一个 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> ');


});
于 2016-03-10T11:27:33.227 回答
2

阅读文档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();
          }
      });
  });
于 2015-11-08T16:59:37.127 回答