A jQuery plugin for displaying Bootstrap form alerts via jQuery events.

Features

• Event based
• Modeled after Bootstrap's plugins
• Automatic binding via html attributes.

Click submit to see an error alert on the example input field.

<form class="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>

<script>
$(function(){
  $("#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"
        }
      ]);
    }
  });
});
</script>

Enable binding of an element via JavaScript:

$("#example").bsFormAlerts({'id': 'example'})

Markup

Just add data-alertid="example" to your element to bind automatically.

<span class="notice-block" data-alertid="example"></span>

set-alert-id-{alertid}

Each bound element will listen for a set event that will send the alert data as JSON. You can also pass an array of alerts, with any priority, and they will all be displayed in their respective color.

// send an alert to the element with data-alertid='example'
$(document).trigger("set-alert-id-example", {
  message: "Please enter at least 3 characters",
  priority: "error"
});

clear-alert-id.{alertid}

Each bound element will listen for a clear event that will clear the alert and reset the form element.

Note: Notice the dot (.) as separator.

// clear the element with data-alertid='example'
$(document).trigger("clear-alert-id.example");

clear-alert-id

Each bound element will also listen for a clear event that will clear all elements. That's the reason for the dot separator.

// clear all elements
$(document).trigger("clear-alert-id");

CSS needs to be added to get proper coloring of the alerts. If you build Bootstrap yourself, you can add the following LESS to your build.

.notice-block {
  .warning {
    color: @warningText;
  }
  .error {
    color: @errorText;
  }
  .success {
    color: @successText;
  }
  .info {
    color: @infoText;
  }
}