Input regex greater than 0 react

Question

I would like to allow numbers higher than 0 in an input field of a react app - javascript. I don't want to have 0 only if it's the first letter. For example 1, 5, 15, 20, 500, 1000005 would be allowed, but 0.5 not. I found this Regex online, however it blocks ALL 0's from being entered.

  const [val, setVal] = useState("");
  return (
    <div className="App">
      <input
        value={val}
        onChange={(e) => setVal(e.target.value.replace(/[^1-9]/g, ""))}
      />
    </div>
  );

use can use condition for this , which would be best case in my opinion — Niraj Gautam
– Niraj Gautam, Commented Sep 27, 2022 at 15:07

Niraj Gautam · Accepted Answer · 2022-09-28 00:23:16Z

1

import React, { useState }  from 'react';

export function App(props) {
 const [val, setVal] = useState("");
 return (
   <div className="App">
   <input
    value={val}
    onChange={(e) => {
      e.target.value>=1 ? setVal(e.target.value): setVal("")
    }}
    />
  </div>
 );
}

it will only set value greater then 0

edited Sep 28, 2022 at 0:23

answered Sep 27, 2022 at 15:12

Niraj Gautam

1777 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Thoeny Over a year ago

This allows 0.5, which it should not as per OP

Niraj Gautam Over a year ago

Just replace the condition with greater than or equal to 1

Peter Thoeny · Accepted Answer · 2022-09-27 19:38:27Z

0

To enforce integers greater than 0 you can remove all non-digits, followed by removing leading zeros:

  const [val, setVal] = useState("");
  return (
    <div className="App">
      <input
        value={val}
        onChange={(e) => setVal(e.target.value.replace(/[^0-9]/g, '').replace(/^0+/, ''))}
      />
    </div>
  );

answered Sep 27, 2022 at 19:38

Peter Thoeny

7,6381 gold badge16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Input regex greater than 0 react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related