React Native: mobile number validation accept numeric value only

Question

How validate mobile number in react native accept the only numeric value.

 <TextInput
      ref='mobileNo'
      keyboardType="numeric"
      style={[styles.textInput, { width: '100%' }]}
      placeholder='Enter mobile number'
      onChangeText={(value) => this.handleChange('mobileNo', value)}   />

I have used keyboardType="numeric" but its accept special character also so I want to accept the only numeric value.

Nirmalsinh Rathod · Accepted Answer · 2018-05-21T05:55:03.370

8

You need to check if input string is number or not. Check below code:

 <TextInput
   ref='mobileNo'
   keyboardType="numeric"
   style={[styles.textInput, { width: '100%' }]}
   placeholder='Enter mobile number'
   onChangeText={(value) => 
   let num = value.replace(".", '');
     if(isNaN(num)){
         // Its not a number
     }else{
        this.handleChange('mobileNo', num)}  
     }
 />

edited May 21 '18 at 05:55

answered May 21 '18 at 04:36

Nirmalsinh Rathod

5,079
4
26
56

i do same thing but if i enter the 9852336.25 accept as numeric value but they not valid number format. – Asif vora May 21 '18 at 04:56
1

You can replace . with blank value. Check my updated answer. – Nirmalsinh Rathod May 21 '18 at 05:55

score 7 · Answer 2 · answered Aug 09 '18 at 04:54

7

Use this validation.

mobilevalidate(text) {
    const reg = /^[0]?[789]\d{9}$/;
    if (reg.test(text) === false) {
      this.setState({
        mobilevalidate: false,
        telephone: text,
      });
      return false;
    } else {
      this.setState({
        mobilevalidate: true,
        telephone: text,
        message: '',
      });
      return true;
    }
  }

answered Aug 09 '18 at 04:54

Vishal Vaghasiya

4,618
3
29
40

Adding required digits in [789] group if required – prodeveloper Oct 03 '19 at 14:55

score 6 · Answer 3 · answered May 21 '18 at 03:21

6

Try using keyboardType='phone-pad'.

answered May 21 '18 at 03:21

vm909

581
3
8

This will still allow the user to enter non-numeric characters. – Tony Adams Jan 04 '19 at 19:36

Anuj Sharma · Answer 4 · 2019-08-31T05:27:29.313

You can also do this and you don't have to use if or any other statement...

First of all download this package to your root folder, this is a inbuild package of npm to download type this command in your cmd prompt....

npm i react-native-validator-form

Then import it to your project.

import { Form, TextValidator } from 'react-native-validator-form';

Then create a class and extend it with React.Component and copy-paste the following code...

state = {
    phonenumber: ''
  }

handleSubmit = () => {
   this.refs.form.submit();
}
render() {
    const {phonenumber} = this.state;
    return (
        <Form 
            ref="form"
            onSubmit={this.handleSubmit}
        > 
          <TextValidator
            name="phonenumber"
            validators={['required', 'isNumber','maxNumber:11']}
            errorMessages={['Phonenumber is required', 'Phonenumber invalid' , 'Not a valid number ']}
            placeholder="Phonenumber"
            value={phonenumber}
            onChangeText={(phonenumber) => this.setState({phonenumber})}
        />
           <Button
                title="Submit"
                onPress={this.handleSubmit}
            />
        </Form>
    );
}

Yossi · Answer 5 · 2018-05-21T03:25:12.010

The way to do this is to check in the onChangeText handler which input was typed and to issue an error if the user entered a non-numeric character.

If the field is a controlled component (its value is set from a state variable, and the state variable is being set in the onChangeText handler), you can not accept the invalid character at all (so that the user types, for example, a '.', and it is not dven displayed).

Whether you explain to the user why his input is not accepted is up to you (either by writing it in the field's label, e.g. "phone number(digits only), or in a string below the field, or by displaying an error).

React Native: mobile number validation accept numeric value only

5 Answers5