How to avoid 'NaN' message in html input

user_2102292 0
Viewed 110

Right now I have the following code implemented:

$(document).ready(function() {   
    let maximumFractionDigits = 2;
    var valueInput = $("#exampleInput");
    
    const formatNumber = (value) => {
      return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits });
    }
    
    valueInput.on('input', function() {
      if (!this.value || (maximumFractionDigits && this.value.endsWith('.'))) {
        return
      }
      $(this).val(formatNumber(this.value));
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="exampleInput" class="form-control" aria-label="Grant Amount" type="text" placeholder="0" name="price" required="">

It works fine and does what I want: when the user enters more than 3 digits the thousand comma separator is added and two decimal places are allowed (USD format).

However, if the user enters some number in another charset, for example with a Japanese keyboard, or any unexpected char the following message appears:

'NaN'

Expected outcome:

If the user enters an invalid character, it should not appear in the input (I want to avoid NaN message), for example if I enter 'a' nothing will appear in the input.

What I've tried:

Somehow I tried to use the isNaN function but my approach is definitely wrong.

const formatNumber = (value) => {
  if (isNaN(value)){
    return 0;
  } else{
    return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits });
  }
}

If anyone could help me I would really appreciate it

html jquery javascript
3 Answers

Well the solution is simple you must check the character right before the input event, which is the keypress event.

valueInput.keypress(
    /**
     * Handle the keypress event on valueInput.
     * 
     * Used to filter in only the numbers. 
     */
    function(e) {
        var keyCode = e.which
        if ((keyCode >= 32 && keyCode <= 43) 
           || keyCode == 45
           || keyCode == 47
           || (keyCode >= 58 && keyCode <= 126))
            return false
    }
);

keyCode is just the ASCII code of the key that is pressed:

  • from 32 to 47 these are all symbols. (44 is , character and 46 is . character)
  • from 58 to 126 these are all other symbols, letters, and parentheses.

Finally, by returning false when a non-number character is typed in, you basically tell jQuery to refuse it as input. Thus, not firing the input event and your problem is solved.

user_97378830

Firstly, you need to remove all character except number and point,and remove redundant point. Finally, remove parseFloat because parseFloat('')'s value is NaN.

$(document).ready(function() {
  let maximumFractionDigits = 2;
  var valueInput = $("#exampleInput");

  const formatNumber = (value) => {
    const parsedValue = value.replace(/[^\d.]/gi, '').replace(/(?<!^[\d-]+)\./g, '');
    return parsedValue ? (+parsedValue).toLocaleString('en-US', {
      maximumFractionDigits
    }) : '';
  }

  valueInput.on('input', function() {
    if (!this.value || (maximumFractionDigits && this.value.endsWith('.'))) {
      return
    }
    $(this).val(formatNumber(this.value));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="exampleInput" class="form-control" aria-label="Grant Amount" type="text" placeholder="0" name="price" required="">

user_71822680

I found a potential solution:

const formatNumber = (value) => {
  var result = parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits });
  const withoutCommas = result.replace(/,/g, '');
  if (isNaN(withoutCommas)){
    return
  }
  return result;
}

Basically, if after parsing the Float and removing the ',' isNaN=True, then return, if it's a number I can just return the result as expected. Might not be the most elegant solution but it works.

user_21022920
Related