Phone Number Validation In React Js

Phone number validation in React JS is essential to ensure that users enter a valid and accurate 10-digit phone number, crucial for authentication and verification purposes. Various methods can be employed for phone number validation in React JS, including using regular expressions (regex) to match the desired format. Regex patterns can be customized to check if a string meets specific criteria. They are versatile, allowing customization to match various phone number formats, such as 10-digit mobile numbers, Indian phone numbers, or American phone numbers, and to identify errors in phone numbers.

written

reviewed

updated

How to Validate Phone Number in React Js?

ReactJS Validate Phone Number or Mobile Number: In ReactJS, phone number validation can be done using regular expressions (regex). A regex pattern can define the format of a valid Indian or American phone number, and then the user's input is compared to the mobile number regex, Indian phone number regex, and American phone number regex. This can be achieved using the built-in JavaScript RegExp object.

Once a valid phone number pattern is defined, it can be used to check if the user's input matches that pattern. If the input matches the pattern, the 10-digit mobile number validation in ReactJS is considered valid. Otherwise, an error message can be displayed to the user indicating that the phone number is invalid

Phone Number Validation React (Indian Phone Number)Example

 <script type="text/babel" data-presets="env,react">
        const { useState } = React;
        function App() {
            const [phoneNumber, setPhoneNumber] = useState("");
            const [errorMessage, setErrorMessage] = useState("");

            const validatePhoneNumber = () => {
                const Regex = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[6789]\d{9}$/;

                if (phoneNumber === "") {
                    setErrorMessage("Phone Number field cannot be empty");
                } else if (!Regex.test(phoneNumber)) {
                    setErrorMessage("Invalid phone number");
                } else {
                    setErrorMessage("");
                }
            };

            return (
                <div className='container'>
                    <h3>React Js Validate phone numbers (Indian Phone Number)</h3>

                    <input
                        type="text"
                        value={phoneNumber}
                        onChange={(e) => setPhoneNumber(e.target.value)}

                    />
                    <button onClick={validatePhoneNumber}>Validate</button>
                    {phoneNumber && (
                        <pre>Phone Number Length {phoneNumber.length}</pre>
                    )}
                    {errorMessage && (
                        <pre style={{ color: "red" }}>{errorMessage}</pre>
                    )}

                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of Mobile Number Validation in React Js

How to Validate USA(American) Mobile Number in React Js?

This React.js example demonstrates how to validate a USA (American) phone number using regular expressions. It contains a form with an input field for entering a phone number.

The onChange event updates the phoneNumber state with the entered value and sets isValid to true. Upon form submission, the code checks if the American mobile number matches the provided regular expression pattern.

If it doesn't match, isValid is set to false, and an error message is displayed. If the phone number is valid.

React Js Validate Phone Number (USA Phone Number) Example

  <script type="text/babel" data-presets="env,react">
        const { useState } = React;
        function App() {
            const [phoneNumber, setPhoneNumber] = useState('');
            const [isValid, setIsValid] = useState(true);

            const handleChange = (e) => {
                setPhoneNumber(e.target.value);
                setIsValid(true);
            };

            const handleSubmit = (e) => {
                e.preventDefault();

                // Regex pattern for validating USA phone numbers
                const phonePattern = /^\+?1?[-.\s]?\(?(\d{3})\)?[-.\s]?(\d{3})[-.\s]?(\d{4})$/;

                if (!phonePattern.test(phoneNumber)) {
                    setIsValid(false);
                    return;
                }

                // Phone number is valid, do something with it
                console.log('Phone number:', phoneNumber);
            };

            return (
                <form class='container' onSubmit={handleSubmit}>
                    <h3>React Js Validate Phone Number for USA</h3>
                    <input
                        type="text"
                        value={phoneNumber}
                        onChange={handleChange}
                        placeholder="Enter phone number"
                    />
                    {!isValid && <p style={{ color: 'red' }}>Invalid phone number</p>}
                    <button type="submit">Submit</button>
                </form>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Validate Phone Number

Releated Tutorials

👉 Vue Js Validate Mobile Number | Indian American

React JS Tutorial