Check input field value

Check the entered value of an input field and restrict if conditions do not match

by Aaren San

HTML

Enter your value between 0.00 - 100.00 <input type="text" size="6" min="0" max="100" stemp="0.25" id="inpNumber">

CSS

input {
 width: 100px;
 height: 20px;
 font-size: 14px;
}

.is-invalid {
      border-color: red;
}

.is-valid {
      border-color: #28a745;
}

JavaScript

$('#inpNumber').on('input', function() {
  var inpVal = $(this).val();
  
  if ( inpVal > 100 || inpVal < 0 || !inpVal) {
    $( "#inpNumber" ).removeClass( "is-valid" );
    $( "#inpNumber" ).addClass( "is-invalid" );
  } else {
    $( "#inpNumber" ).removeClass( "is-invalid" );
    $( "#inpNumber" ).addClass( "is-valid" );
  }
});

$('#inpNumber').keypress(function (event) {
  var input = $(this).val();
  
  if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
    event.preventDefault();
    return false;
  }
  return isNumberRegChecked(event, this);
  return isNumber(event, this);
});
      
function isNumberRegChecked( evt, element ) {
  var inpVal = $(element).val();
  // ^(\d\d?(\.\d\d?)?|100(\.00?)?)$ also possible
  var checkShare = /^(\d{0,2}(\.\d{0,2})?)$/.test(inpVal);
  if (checkShare == false)
    return false;
  	return true;
}

// THE SCRIPT THAT CHECKS IF THE KEY PRESSED IS A NUMERIC OR DECIMAL VALUE.
function isNumber( evt, element ) {
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if ((charCode != 46 || $(element).val().indexOf('.') != -1) &&      // “.” CHECK DOT, AND ONLY ONE.
    	(charCode < 48 || charCode > 57))
    	return false;
  		return true;
}