About

A small bootstrap plugin that provide form input controls that feedback to the user as to whether their input was valid.
Pelase Note: This plugin does NOT restrict form input/submission, it just provides visual feedback to the user.

Bootstrap 3.x users: Please note the examples below are all using Bootstrap 2.3.2. As of version 1.0 Bootstrap-AcknowledgeInputs supports Bootstrap 3.x and can (optionally) take in the "bootstrap_version" option when calling $().acknowledgeinput(); but will support both 2.3.2 and 3.x if not supplied. Make sure you replace the input-append class with the input-group class in the examples below and add the form-control class to the input element.

Examples

Layout Options
 Input RequiredInput Not Required
Append
Prepend
Both
Data Types
TypeInputExamples
Text
"Bootstrap"
Email
Example@example.com
Telephone Number
+(44)1234 56789
0111 111 111 111
(0123456459) 13345678
Number
1234
0
0123456
-123
Integer
1234
0
-123
Decimal
12.34
0.2345
-123.2
Currency
12.34
0.23
33,00
Colour
#000000
#fff
URL
http://www.github.com
http://averagemarcus.github.com/Bootstrap-AcknowledgeInputs/

Using Bootstrap-AcknowledgeInput.js

  1. Make sure you include all the required files:
  2. <html lang="en">
        <head>
            <link rel="stylesheet" href="css/bootstrap.min.css">
            <link rel="stylesheet" href="css/font-awesome.min.css">
        </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>
    
  3. Define your form with new acknowledge inputs
  4. <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-role and data-type (optional).
    The data-type attribute tells the plugin what format the input text should be to warrant a success.
    The current data-type options are text (default), email and tel.

  5. Call the plugin on document ready
  6. <script type="text/javascript">
        $().ready(function() {
            $().acknowledgeinput();
        });
    </script>
    

Options

NameTypeDefaultDescription
success_color color #468847 Sets the colour of the icon upon a successful match.
Please Note: This requires font-awesome as the default bootstrap icons don't support different colours.
danger_color color #bd362f Sets the colour of the icon upon a failed match.
Please Note: This requires font-awesome as the default bootstrap icons don't support different colours.
icon_success icon class icon-ok Sets the icon to display upon a successful match.
icon_danger icon class icon-warning-sign Sets the icon to display upon a failed match.
update_on event change Sets the event to perform the icon update method. Possible options are change, keydown, keyup, focus & blur.

Options Example

<script type="text/javascript">
    $().ready(function() {
        $().acknowledgeinput({
            success_color: '#00FF00',
            danger_color: '#FF0000',
            update_on: 'keyup'
        });
    });
</script>

Layout Variations

Append

<div class="input-append" data-role="acknowledge-input">
    <input type="text" required="required" placeholder="Any Text Required" />
    <div data-role="acknowledgement"><i></i></div>
</div>

Prepend

<div class="input-prepend" data-role="acknowledge-input">
    <div data-role="acknowledgement"><i></i></div>
    <input type="text" required="required" placeholder="Any Text Required" />
</div>

With additional icon

<div class="input-prepend input-append" data-role="acknowledge-input">
    <div class="add-on"><i class="icon-envelope"></i></div>
    <input type="text" required="required" placeholder="Any Text Required" />
    <div data-role="acknowledgement"><i></i></div>
</div>

Supported Inputs

Input [type="text"]
Input [type="password"]
Input [type="email", data-type="email"]
Textarea
Select Dropdown
Select Listbox
Input [type="checkbox"], Input [type="radio"], Input [type="submit"], Button

No planned support

Change Log

v1.0 16/2/2014
  • Fixed issue #10 - Added Bootstrap 3 support
v0.7 09/11/2013
  • Replaced multiple .toLowerCase() with a single call.
  • Added missing semicolon.
  • Removed example folder - Example available at http://averagemarcus.github.io/Bootstrap-AcknowledgeInputs/
v0.6 12/7/2013
  • Fixed issue #9 - Space was incorrectly validating
v0.5 12/7/2013
  • 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
v0.4 20/3/2013
  • Added support for all valid CSS colours, not just hexadecimal colours.
v0.3 26/2/2013
  • Fixed bug in currency matching. Not supports amounts without decimals and supports commas.
  • Added ASP .Net MVC Html Helper class.
v0.2 23/2/2013
  • Fixed select listbox support
  • Added additional data-type support (numbers, integer, decimal, currency, colour and URL)
v0.1 23/2/2013
  • Initial Release