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.
<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>
<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.
<script type="text/javascript">
$().ready(function() {
$().acknowledgeinput();
});
</script>
| Name | Type | Default | Description |
|---|---|---|---|
| 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. |
<script type="text/javascript">
$().ready(function() {
$().acknowledgeinput({
success_color: '#00FF00',
danger_color: '#FF0000',
update_on: 'keyup'
});
});
</script>
<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>
<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>
<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>
| 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 |