Event Based Bootstrap Form Validation Pluin with jQuery - formalerts
File Size: | 133KB |
---|---|
Views Total: | 3800 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.