1

I validate an input field by those patterns:

  • only positive numbers
  • only one .
  • only numeric values
  • only two decimals after .
  • only numbers between 0 and 100
  • limit input to 5 characters (0 ... 1.1 ... 10.2 ... 33.23 ... 99.99 or 100)

These validations work with my code fine. Even there is a better way to code this validation. But anyways - my issue, which I can't solve right now is - if I enter a value for example 99.99 or 100 or 23.23 and I want to change the value again by selecting / mark the entire value with my mouse for example - it will not change! If I write 2.33 and I select/mark the entire value with my mouse it will change. So it seems I'm facing a 'false' state which does not allow me to enter another digit and right now I could not find a kind of an event which detects that I select something in my input field.

I have prepared an JSFIDDLE code - where do I have my confusion?

ps: I am also aware that maybe my keypress event is overwriting the false/true states, I'm trying to solve this afterwards.

Thank you very much! Best Regards

   $('#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;
}
44r3n54n
  • 90
  • 9
  • 1
    Put it all in one method, like event handler `input`. `keypress` isn't supported and it's giving screwy results if you use both of those on the same input element. – Train Jul 29 '19 at 21:46
  • I agree to put all in one method but I have to figure out which one will serve best for me - do you think .on('input') event is enough to trigger my method? Didn't know that keypress isn't supported anymore. – 44r3n54n Jul 29 '19 at 21:55
  • Yes, use "input" and not keypress, that should be enough. Keypress isn't supported and works differently in other browsers. – Train Jul 29 '19 at 22:04
  • Well, the reason why I chose keypress is that this was the only way to prevent the user from entering more then 6 digits. If I put it into the 'input' event only the user can write more than 6 digits for example 100.00123123123 which I do not want. – 44r3n54n Jul 29 '19 at 22:31
  • html input Elements have a min value, max value, and maxlength attribute. You really don't need all this code to do that. Im pretty sure you can limit decimal points too if you're input type is number. – Train Jul 29 '19 at 22:34
  • You can limit 2 decmial places by either creating your own custom attribute or check out the SO answers. https://stackoverflow.com/questions/34057595/allow-2-decimal-places-in-input-type-number – Train Jul 29 '19 at 22:38
  • Thank you already saw this one and as a user already described in a comment you can still enter more than two digits and my requirements is that a user can only enter two digits. So I am still wondering how others are solving this "simple" request of a number from 0 - 100 and two digits seperated by a dot. Maybe I'm thinking to complicated... – 44r3n54n Jul 29 '19 at 23:44

0 Answers0