React Native Mobile Number Validation With Numeric Input Only

React Native: Validating Mobile Numbers with Numeric Values Only

React Native provides a convenient way to validate mobile number inputs by setting the keyboardType prop to “numeric” on a <TextInput> component. However, by default, this allows special characters as well, which might not be desired for a mobile number input field where only numeric values should be accepted.

Approach 1: Checking for Numeric Input within the onChangeText Handler

In order to accept only numeric values for the mobile number input, you can perform a validation check within the onChangeText handler. Here’s an example:

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

Approach 2: Using Regular Expressions for Specific Number Patterns

If you want to enforce a specific mobile number format, such as Indian phone numbers starting with 7, 8, or 9 and having 10 digits, you can use regular expressions. Here’s an example of validating against the Indian phone number pattern:

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;
  }
}

Option: keyboardType=’phone-pad’

If the previous solutions don’t meet your requirements, you can also try using the keyboardType='phone-pad' setting for the <TextInput> component. This option is closer to a numeric keyboard, but it may vary across different platforms.

Option: Using a Third-Party Library for Form Validation

If you want a more comprehensive form validation solution, you can leverage third-party libraries like react-native-validator-form. This library provides built-in validators and validation messages. Here’s an example of using it:

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>
  );
}

Handling Non-Numeric Characters for a Controlled Component

If you are using a controlled component where the value is set from a state variable and the state variable is being updated in the onChangeText handler, you can prevent non-numeric characters from being accepted altogether. You can also provide an error message to inform the user about the required input format.

I hope these options help you validate mobile numbers in React Native while accepting only numeric values. Remember to choose the approach that best suits your specific requirements and use case. Happy coding!

reference :

https://stackoverflow.com/questions/50441460/react-native-mobile-number-validation-accept-numeric-value-only

Read Another Article :

reactjs