Skip to content

oucil/ecms-number-format

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ecmsNumberFormat jQuery plugin

#####jQuery Plugin for Input Field Number Formatting MIT license: [http://www.opensource.org/licenses/mit-license.php]

Author: Kevin Farley / eCommunities / [http://ecms.io]

GitHub: [http://github.com/ecommunities/ecmsNumberFormat]

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: **min**imum value, **max**imum value, **dec**imal precision, and **inc**rement, 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!

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)
Alternate Field Data-Attribute Parameters

Overrides attribute parameters

  • data-min
  • data-max
  • data-dec
  • data-inc
  • data-valid
  • data-invalid

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

About

jQuery Plugin for Input Field Number Formatting

Resources

License

Stars

Watchers

Forks

Packages

No packages published