A small bootstrap plugin that provide form input controls that feedback to the user as to whether their input was valid.
C#
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
ASP .Net MVC
.gitattributes
.gitignore
LICENSE.md
README.md
bootstrap-acknowledgeinput.js
bootstrap-acknowledgeinput.min.js

README.md

Bootstrap-AcknowledgeInputs

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.

Required

Recommended

Using Bootstrap-AcknowledgeInput.js

  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>
  2. 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-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.

  3. Call the plugin on document ready

    <script type="text/javascript">
        $().ready(function() {
            $().acknowledgeinput();
        });
    </script>

Change Log

v1.1 13/8/2014

  • Added support for FontAwesome 4

v1.0 16/2/2014

  • Added support for Bootstrap 3.x

v0.7 09/11/2013

v0.6 29/10/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