Javascript 在引导中发生事件后，如何显示警报？_Javascript_Jquery_Twitter Bootstrap 3_Jqbootstrapvalidation

Javascript 在引导中发生事件后，如何显示警报？

javascript jquery twitter-bootstrap-3

Javascript 在引导中发生事件后，如何显示警报？,javascript,jquery,twitter-bootstrap-3,jqbootstrapvalidation,Javascript,Jquery,Twitter Bootstrap 3,Jqbootstrapvalidation,我想在按下提交按钮并成功完成所有操作后显示警报。我正在使用 jqBootstrapValidation.js 库来验证表单是否在没有值的情况下发送。这是我现在拥有的代码： <!DOCTYPE html> <br/> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewp

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

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>




标题
电子邮件地址

打字

$（函数（）{
$（“输入，选择，文本区域”）.not（“[type=submit]”）。jqBootstrapValidation（）；
});
警报
成功的形式
成功您已正确填写表单！

我希望它出现在左上角，然后在验证成功后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

回调

您可以通过添加一些样式将警报

容器重新定位到左上角，并在默认情况下隐藏它，或者更好地使用引导模式：）尝试以下操作
    <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();
          }
      });
  });


.... // 在此处添加警报对话框
.警报包装器{
位置：绝对位置；
排名：0；
左：0；
z指数：999；
背景：#fff；
显示：无；
身高：100%；
宽度：100%；
溢出：隐藏；
}
$（函数（）{
$（“输入，选择，文本区域”）。不是（“[type=submit]”）。jqBootstrapValidation({
对,，
submitError：函数（$form、event、errors）{
//这里处理错误
},
submitSuccess：函数（$form，event）{
//展示你的成功信息
$（“.alert wrapper”）.fadeIn（）；
//两秒钟后重定向到另一页
setTimeout（函数（）{
window.location.href=”https://www.example.com";
}, 2000);
event.preventDefault（）；
}
});
});
阅读表单，当表单成功验证和提交时，将触发一个submitSuccess
回调
您可以通过添加一些样式将警报容器重新定位到左上角，并在默认情况下隐藏它，或者更好地使用引导模式：）尝试以下操作
    <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();
          }
      });
  });


.... // 在此处添加警报对话框
.警报包装器{
位置：绝对位置；
排名：0；
左：0；
z指数：999；
背景：#fff；
显示：无；
身高：100%；
宽度：100%；
溢出：隐藏；
}
$（函数（）{
$（“输入，选择，文本区域”）。不是（“[type=submit]”）。jqBootstrapValidation({
对,，
submitError：函数（$form、event、errors）{
//这里处理错误
},
submitSuccess：函数（$form，event）{
//展示你的成功信息
$（“.alert wrapper”）.fadeIn（）；
//两秒钟后重定向到另一页
setTimeout（函数（）{
window.location.href=”https://www.example.com";
}, 2000);
event.preventDefault（）；
}
});
});
有一个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> ');


});

$（“输入，文本区域”）.jqBootstrapValidation(
{
对,，
submitError：函数（$form、event、errors）{
//当提交产生错误时要有什么？
//还没决定我是否需要它
},
submitSuccess：函数（$form，event）{
调试器；
event.preventDefault（）；
$（'#divid'）.append（'AlertsForm Successful
成功！您已正确填写表单！
');
});
有一个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> ');


});

$（“输入，文本区域”）.jqBootstrapValidation(
{
对,，
submitError：函数（$form、event、errors）{
//当提交产生错误时要有什么？
//还没决定我是否需要它
},
submitSuccess：函数（$form，event）{
调试器；
event.preventDefault（）；
$（'#divid'）.append（'AlertsForm Successful
成功！您已正确填写表单！
');
});
我不确定，但我相信，验证函数必须返回一个值。你能检查它吗？我不确定，但我相信，验证函数必须返回一个值。你能检查它吗？