MIT license: [http://www.opensource.org/licenses/mit-license.php], (*1)
Author: Kevin Farley / eCommunities / [http://ecms.io], (*2)
GitHub: [http://github.com/ecommunities/ecmsNumberFormat], (*3)
This plugin allows you to provide visual validation of a numeric input field (input, number) via addition/removal of classes both during editing, and after leaving the field. In the standard declaration below, we
demonstrate how you can validate against a variety of criteria without impeding a users ability to enter data in their own way, and then force the field to update to the closest valid value upon losing focus. Criteria
currently include: minimum value, maximum value, decimal precision, and increment, but the to-do's include the ability to add additional filters via Regex strings, feel free to fork and PR
to lend a hand!, (*4)
Configuration Parameters
- @param float|null min The minimum value to allow
- @param float|null max The maximum value to allow
- @param int dec The number of decimal places to fix the value to
- @param float inc The increment value to match to
- @param string valid Class name to be added when value is valid (only while field has focus)
- @param string invalid Class name to be added when value is invalid (only while field has focus)
Alternate Field Attribute Parameters
Overrides call time parameters
- min (text|number)
- max (text|number)
- step (number), (*5)
Alternate Field Data-Attribute Parameters
Overrides attribute parameters
- data-min
- data-max
- data-dec
- data-inc
- data-valid
- data-invalid, (*6)
Configuration Examples:
// Defaualt formatting, no decimals, increment by one, no min or max.
var numOpts = {}
// No min or max, fix to two decimals and round to multiples of 0.25.
var numOpts = { dec:2, inc:0.25 };
// Enforce a minimum of 1000 and a maximum of 2000, with no decimals, and increment by one.
var numOpts = { min:1000, max:2000 };
// The kitchen sink.
var numOpts = { min:1000, max:2000, dec:4, inc:0.0025, valid:'valid-class', invalid:'invalid-class' };
Standard Declaration:
$('#foo').on('keyup paste change', function() { $(this).ecmsNumberValidate(numOpts); });
$('#foo').on('blur', function() { $(this).ecmsNumberFormat(numOpts); }).blur();
TO-DO's
- allow precision to be forced in output (i.e. trailing zeros in html5 number field)
- add support for more numerical types (i.e. scientific notation)
- add support for custom match regex queries in addition to standard options
- add support for helpful error messages
- add example html file + test files / cases
Wallogit.com
