HTML input type number, prevent insert invalid number

Question

I have the following input number:

 <input type="number" id="quantity" name="quantity"  (change)="firstRangePointChanged($event)" >

I want to prevent the user from inputting invalid values like --99 (--) instead of (-), I have tried to use:

if (Number.isNaN(num)) {
          event.preventDefault();

but it isn't working.

I want to allow a negative numbers but not --99. I want that if the user inserts invalid number, then return the value to the previous one (the last valid value of that input):

 firstRangePointChanged(event) {
   
    const num = parseFloat(event.target.value);
    if (Number.isNaN(num)) {
      event.preventDefault();
      return;
    }
}

have you read https://stackoverflow.com/questions/7372067/is-there-any-way-to-prevent-input-type-number-getting-negative-values — John Lobo, Jan 30 '23 at 07:21
If you;re using angular framework, do mention it in the answer or add a tag — shrys, Jan 30 '23 at 07:22
you can not prevent the user from breaking the input and inserting invalid values. YOu only can do a plausibility check and warn him that is value is incorrect. — tacoshy, Jan 30 '23 at 07:23
it's a bit old (and it's not applied to input type="number"), but... https://stackoverflow.com/questions/54460923/angular-2-restrict-input-field/54462816#54462816 — Eliseo, Jan 30 '23 at 09:44

score 0 · Answer 1 · answered Jan 30 '23 at 08:09

0

you can simply use regex in pattern to do that. for example:

<input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">

remember for use pattern, you must use type:"text" to allow you to use regex in pattern

answered Jan 30 '23 at 08:09

Mohammad Hassani

21
5

1

pattern only validate the input, **not** avoid you can type error. – Eliseo Jan 30 '23 at 09:42

score -1 · Answer 2 · answered Jan 30 '23 at 07:47

function is_validNumber(n){
  // check value is number or not
  if( n == NaN ){ return false; }
  let b = typeof n;
  if( b == 'number' || b == 'string' ){
    // Math.round(Number(n) :to supported decimal number
    return String(n).length ? Number.isInteger( Number(n) ) : false;
  }
  return false;
}
// =========================================================
function numValidation_(n){
  // add history valid number of this input
  if( n.history_validNumber == undefined ){
    n.history_validNumber = 0; // default value
  }
  
  let val_ = n.value;
  if( is_validNumber(val_) ){
    n.history_validNumber = val_; // add history
    console.log('valid');
  }else{
    // invalid
    n.value = n.history_validNumber;
    console.log(`invalid, set last valid:${n.history_validNumber}`);
  }
}

<input type="number" onchange="numValidation_(this)" />

score -1 · Answer 3 · answered Jan 30 '23 at 08:17

You could handle this with regular expression like the example:

Angular version is:

let {pattern} = Validators;

this.formGroup = this.fb.group({
     price:['',pattern("^([1-9]+[0-9]* | [1-9])$")]
})

Bind the form group to your input to only accept positive numbers, replacing your desired pattern.

In your template:

<form [ngForm]="formGroup">
   <label for="price">Price</label>
   <input type="number" name="price" formControlName="price" />
</form>

HTML input type number, prevent insert invalid number

3 Answers3