reacttoolbox input component not validating characters

Question

I am using React-toolbox component Input with type="tel"

How do you prevent the component to not accept invalid characters like alphabets?

I want it to accept only numbers. The input should only be a valid telephone number including international format.

Here is a sample code

<Input type="Type"
    label="Mobile number"
    name="newUserMobileNo"
    value={this.state.newUserMobileNo}
    className="input mobileno"
    onChange={this.newUserMobileNoChanged}
    error={this.state.noNewUserMobileNo}
    theme={theme} />

score 0 · Answer 1 · answered Aug 29 '19 at 06:52

0

In onChange function (newUserMobileNoChanged) check event.target.value with number regex(/^[0-9\b]+$/),if its valid then setState of "newUserMobileNo" else not.

<Input type="Type"
    label="Mobile number"
    name="newUserMobileNo"
    value={this.state.newUserMobileNo}
    className="input mobileno"
    onChange={this.newUserMobileNoChanged}
    error={this.state.noNewUserMobileNo}
    theme={theme} />

answered Aug 29 '19 at 06:52

Smit Vora

470
3
10

thanks how about the formatting can we do formatting let's say ### ### ### ? – cam Aug 30 '19 at 00:05
you can use masking or this package :[react-phone-number-input](http://catamphetamine.github.io/react-phone-number-input/) – Smit Vora Aug 30 '19 at 03:30

reacttoolbox input component not validating characters

1 Answers1