How to validate input type="number" in ReactJS?

Question

I have a problem with validation of HTML element input type="number" in ReactJS Application:

render() {
    return (
        <input type="number" onBlur={this.onBlur} />
    );
},

onBlur(e) {
    console.log(e);
}

The log is:

Everything is ok on desktop application, but on mobile there is a problem. User can change the keyboard and enter everything he wants. So I wanted to fix it using validation. When I try to catch the value the user enter, I get this log. It's like React is just hiding this incorrect value.

How can I fix it? Or there is another way how to validate input type="number" in ReactJS Application?

Thanks in advance.

Anatoli · Accepted Answer · 2015-08-16 15:03:54Z

3

It's the best way how to validate:

<input type="number" pattern="[0-9]*" inputmode="numeric">

In this way I can't enter smth else. Moreover e.target.value with checking on null can't get good fixed result because empty field and the field with not correct text are the same (empty).

answered Aug 16, 2015 at 15:03

Anatoli

6901 gold badge10 silver badges22 bronze badges

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

1 Comment

Jiangge Zhang Over a year ago

"pattern: This attribute applies when the value of the type attribute is text, search, tel, url, email or password; otherwise it is ignored" via MDN

agmcleod · Accepted Answer · 2015-08-13 15:47:08Z

2

You can access the value through:

e.target.value;

I don't recall if on mobile if it passes an empty value if it's not a number like on desktop. But just do your checks against it. Don't let the form submit unless it's all valid :)

answered Aug 13, 2015 at 15:47

agmcleod

13.6k13 gold badges61 silver badges100 bronze badges

9 Comments

Anatoli Over a year ago

You can see from my screenshot, that e.target is null, so I can't get it.

agmcleod Over a year ago

Ah my bad. Typically one will update the stored value on a keyup change. Then you have a button to confirm the input.

Anatoli Over a year ago

I don't want to check in method onChange. By the way, onChange the same empty value like in onBlur

agmcleod Over a year ago

If you set a ref on the element: ref="myNumber" or w/e you wanna call it. You can access it through: React.findDOMNode(this.refs.myNumber). Should be able to access the value attribute from there.

agmcleod Over a year ago

With what value in the field though? Is it a number?

|

Collectives™ on Stack Overflow

How to validate input type="number" in ReactJS?

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related