Event Based Bootstrap Form Validation Pluin with jQuery - formalerts

formalerts is an event based form validation plugin that displays bootstrap form alerts attached to the input field when your user clicks the submit button.

You might also like:

• JS Notification Plugin For Bootstrap or jQuery UI - Pines Notify
• jqBootstrapValidation - Validation Framework For Bootstrap Form
• Simple jQuery Form Validation Plugin with jQuery UI and Bootstrap - ETFormValidation

Basic Usage:

1. Include bootstrap CSS files on your web page

<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />

2. The HTML

<form class="bs-docs-example form-horizontal" id="example-form">
<div class="control-group">
<label class="control-label" for="inputExample">Example</label>
<div class="controls">
<input type="text" id="inputExample" placeholder="Example">
<span class="notice-block" data-alertid="example"></span> </div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>

3. Include jQuery library, bootstrap and jquery.bsFormAlerts.js on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="../src/jquery.bsFormAlerts.js"></script> 

4. The javascript

<script>
      $(function(){
        var $window = $(window);
        // side bar
        setTimeout(function () {
          $('.bs-docs-sidenav').affix({
            offset: {
              top: function () { return $window.width() <= 980 ? 250 : 170 }
            , bottom: 270
            }
          })
        }, 100)

        // make code pretty
        window.prettyPrint && prettyPrint();

        //
        $("#example-form").submit(function() {
          var inputVal = $("#inputExample").val();
          $(document).trigger("clear-alert-id.example");
          if (inputVal.length < 3) {
            $(document).trigger("set-alert-id-example", [
              {
                message: "Please enter at least 3 characters",
                priority: "error"
              },
              {
                message: "This is an info alert",
                priority: "info"
              }
            ]);
          }

          return false;
        });
      });
</script>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.