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

我想在提交按钮被按下并且一切都成功完成后显示一个提醒。我现在用的是如何在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>

来源

2015-11-08 learningbyexample

我不知道，但我相信，验证功能必须返回AV ALUE。你能检查它吗？ – Rajesh

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

来源

2015-11-08 16:59:37

有一个submitSuccess：函数（$形式，事件）当表单验证successfully..you可以使用的警报这个函数里面.. 在下面的代码中，我已经使用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-10 11:27:33

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

回答

相关问题