A small bootstrap plugin that provide form input controls that feedback to the user as to whether their input was valid.
http://averagemarcus.github.io/Bootstrap-AcknowledgeInputs/ for examples and more options.
An example is provided that includes all necessary javascript and stylesheets.
- jQuery - http://jquery.com/
- Bootstrap (2.3.2) - https://github.com/twbs/bootstrap/tree/v2.3.2 OR
- Bootstrap (3.x) - http://getbootstrap.com/
- Font-Awesome (3.2.1) - https://github.com/FortAwesome/Font-Awesome/tree/v3.2.1
-
Make sure you include all the required files:
<html lang="en"> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- optional but recommended --> </head> <body> <!-- PAGE CONTENT --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <script type="text/javascript" src="js/bootstrap-acknowledgeinput.min.js" ></script> </body> </html>
-
Define your form with new acknowledge inputs
<form> <label>Username</label> <div class="input-append" data-role="acknowledge-input"> <input type="text" required="required" placeholder="Any Text Required" data-type="text" /> <div data-role="acknowledgement"><i></i></div> </div> </form>
The key things to note here is the use of
data-roleanddata-type(optional).
Thedata-typeattribute tells the plugin what format the input text should be to warrant a success.
The currentdata-typeoptions aretext(default),emailandtel. -
Call the plugin on document ready
<script type="text/javascript"> $().ready(function() { $().acknowledgeinput(); }); </script>
- Added support for FontAwesome 4
- Added support for Bootstrap 3.x
- Replaced multiple .toLowerCase() with a single call.
- Added missing semicolon.
- Removed example folder - Example available at http://averagemarcus.github.io/Bootstrap-AcknowledgeInputs/
- Fixed issue #9 - Space was incorrectly validating
- Fixed issue #6 - Inputting value using jQuery val() not triggering update
- Fixed issue #8 - Added the ability to provide a custom regex pattern to match against
- Added support for all valid CSS colours, not just hexadecimal colours.
- Fixed bug in currency matching. Not supports amounts without decimals and supports commas.
- Added ASP .Net MVC Html Helper class.
- Fixed select listbox support
- Added additional data-type support (numbers, integer, decimal, currency, colour and URL)
- Initial Release