Search code examples
javascriptjquerytwitter-bootstrap-3jqbootstrapvalidation

How do I display an alert after an event has happened in Bootstrap?

I want to display an alert after the submit button has been pressed and everything was done successfully. I am using the

jqBootstrapValidation.js

library to validate that the form is not being sent without values. This is the code that I have right now:

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

I want this to appear at the top left-hand corner and then redirect me to another page after 2 seconds or so (for now to the same page) after the validation was successful. Is this possible?

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

  • Read the documentation there is a submitSuccess callback that is fired when the form is successfully validated and submitted.

    You can reposition your alert container to the top left hand by adding some styling and hide it by default or better use bootstrap modals :) Try this 

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