jQuery Plugin For Number Input Validation - inputNumberTextbox

inputNumberTextbox is a jQuery plugin to enhance the number input that restricts input field to only allow numbers in textbox while typing.

Features:

• Support both positive and negative numbers.
• Allows to set the max/min values.
• Custom error messages.
• Useful callback functions.

How to use it:

1. Create a normal input field and specify the min/max values in the data-intb attributes:

<input type="text" 
       class="numberTextBox" 
       data-intb-min-value="" 
       data-intb-max-value="">

2. Include the minified version of the jQuery inputNumberTextbox plugin after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.inputNumberTextbox.min.js"></script>

3. Initialize the plugin with settings.

var n = $(".numberTextBox").inputNumericTextBox({
  negativeAllow: false,
  decimalAllow: true,
  maxDecimalDigits: 4,
  maxValue: 800,
  minValue: 300,
  beforeKeypressAction: function(evt, settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('before keypress');
  },
  afterKeypressAction: function(evt, settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('after keypress');
  },
  beforeKeyupAction: function(evt, settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('before keyup');
  },
  afterKeyupAction: function(evt, settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('after keyup');
  },
  beforeBlurAction: function(evt, settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('before blur');
  },
  afterBlurAction: function(evt, settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('after blur');
  },
  onError: function(evt, settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('on error');
      if (settings.decimalError) {
          //alert('More than one decimal number is not allowed');
      } else if (settings.multipleNegativeSignError) {
         // alert('More than one negative sign is not allowed.');
      } else if (settings.startNegativeSignError) {
          //alert('You can only use one negative sign at the start');
      } else if (settings.maxDecimalDigitError) {
        //alert('You can only use ' + settings.maxDecimalDigits + ' decimal digits.');
      } else if (settings.maxValueError) {
        //alert('You cann\'t enter value more than ' + settings.maxValue);
      }
  },
  onInitializationStart: function(settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('on complete');
  },
  onInitializationComplete: function(settings) {
      //console.log(this);
      //console.log(evt);
      //console.log(settings);
      //console.log('on complete');
  }
});

4. Important Note: If you initialize more than one then it will override previous settings and events. To maintain previous events, pass the whole setting once again with changes within it. Now it will override events:

$(".numberTextBox").inputNumericTextBox();
var n = $(".numberTextBox").inputNumericTextBox({
    negativeAllow: false,
    decimalAllow: true
});
console.log(n);

5. All default plugin options.

negativeAllow: true,
decimalAllow: true,
minDecimalDigits: 0,
minValue: -Infinity,
maxDecimalDigits: Infinity,
maxValue: Infinity,
decimalError: false,
startNegativeSignError: false,
multipleNegativeSignError: false,
maxDecimalDigitError: false,
maxValueError: false,
beforeKeypressAction: function () {
},
afterKeypressAction: function () {
},
beforeKeyupAction: function () {
},
afterKeyupAction: function () {
},
beforeBlurAction: function () {
},
afterBlurAction: function () {
},
onError: function () {
},
onInitializationStart: function () {
},
onInitializationComplete: function () {
}

---

This awesome jQuery plugin is developed by faizananwerali. For more Advanced Usages, please check the demo page or visit the official website.