Validating phone numbers in React with regex alone only catches formatting errors. It can’t indicate whether a number is disconnected, or provide phone metadata such as carrier and line type. This guide discusses how to validate a phone number using a basic regex-based React component, and how that compares to using a phone validation API.
Ensuring the accuracy and validity of user-submitted phone numbers is crucial for maintaining data quality and improving user experiences. React, with its component-based architecture and state management capabilities, provides an excellent foundation for implementing phone number validation. However, to improve the validation process and gain deeper insights into phone numbers, integrating with Trestle’s Phone Validation API can take your application to the next level.
In this guide, we’ll explore how to validate a phone number using React, and then show how to enhance it with Trestle’s Phone Validation API.
Part 1: Basic Phone Validation with React #
React allows us to create interactive forms with real-time validation. Here’s a basic example of how you might implement phone number validation using React and a simple regex pattern:
import React, { useState } from 'react';
const PhoneValidationForm = () => {
const [phoneNumber, setPhoneNumber] = useState(''); // State to store user input
const [isValid, setIsValid] = useState(false); // State to store validation result
const validatePhone = (number) => {
// Regex pattern to validate phone numbers (e.g., starts with +, followed by 1-14 digits)
const phoneRegex = /^\+?[1-9]\d{1,14}$/;
return phoneRegex.test(number);
};
const handleChange = (e) => {
const number = e.target.value;
setPhoneNumber(number); // Update the phone number state
setIsValid(validatePhone(number)); // Validate the number and update the result
};
return (
<div>
<input
type="tel"
value={phoneNumber}
onChange={handleChange}
placeholder="Enter phone number"
/>
{/* Display validation feedback */}
{phoneNumber && (
<p>{isValid ? 'Valid phone number' : 'Invalid phone number'}</p>
)}
</div>
);
};
export default PhoneValidationForm;This basic implementation provides real-time feedback as the user types, using a simple regex pattern to check if the input matches a basic phone number format. The limitations of regex-only validation are important to understand:
- It only checks the format, not whether the number is actually in service.
- It doesn’t provide any additional information about the phone number.
- It may not catch all valid or invalid formats.
Part 2: Enhancing Validation with Trestle’s API #
To overcome these limitations and provide a more robust validation solution, we can integrate Trestle’s Phone Validation API. This API not only validates the phone number format but also provides valuable additional information.
Here’s how we can enhance our React component to use Trestle’s API:
import React, { useState, useCallback } from 'react';
import axios from 'axios';
import { debounce } from 'lodash';
const PhoneValidationForm = () => {
const [phoneNumber, setPhoneNumber] = useState(''); // State to store user input
const [validationResult, setValidationResult] = useState(null); // State to store API response
const [isLoading, setIsLoading] = useState(false); // State to manage loading state
const [error, setError] = useState(null); // State to store errors
const validatePhoneWithAPI = useCallback(
debounce(async (number) => {
setIsLoading(true);
setError(null); // Reset previous error
try {
// Send API request with encoded phone number
const response = await axios.get('https://api.trestleiq.com/3.0/phone_intel', {
params: { phone: number },
headers: {
'x-api-key': process.env.REACT_APP_TRESTLE_API_KEY, // API key from environment variables
'Accept': 'application/json', // Specify JSON response format
},
});
setValidationResult(response.data); // Update state with API response
} catch (err) {
console.error('API Validation Error:', err); // Log the error
setError('Failed to validate phone number. Please try again.');
} finally {
setIsLoading(false); // Stop the loading spinner
}
}, 500), // Debounce API calls to avoid excessive requests
[]
);
const handleChange = (e) => {
const number = e.target.value;
setPhoneNumber(number); // Update phone number state
setValidationResult(null); // Reset validation result
// Validate locally using regex before calling the API
const phoneRegex = /^\+?[1-9]\d{1,14}$/;
if (phoneRegex.test(number)) {
validatePhoneWithAPI(number); // Call API if regex validation passes
} else {
setValidationResult({ isValid: false, message: 'Invalid phone number format' });
}
};
return (
<div>
<form>
<input
type="tel"
value={phoneNumber}
onChange={handleChange}
placeholder="Enter phone number"
/>
</form>
{/* Display validation feedback */}
{isLoading && <p>Validating...</p>}
{validationResult && (
<div>
<h3>Validation Result:</h3>
<p>Is Valid: {validationResult.is_valid ? 'Yes' : 'No'}</p>
{validationResult.activity_score && <p>Activity Score: {validationResult.activity_score}</p>}
{validationResult.line_type && <p>Line Type: {validationResult.line_type}</p>}
{validationResult.carrier && <p>Carrier: {validationResult.carrier}</p>}
{validationResult.is_prepaid !== undefined && (
<p>Is Prepaid: {validationResult.is_prepaid ? 'Yes' : 'No'}</p>
)}
</div>
)}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
};
export default PhoneValidationForm;The Power of React + Trestle’s API for Phone Validation #
By integrating Trestle’s API with our React component, you can significantly enhance your phone validation capabilities:
- Comprehensive Validation: Beyond just format checking, you can verify if the number is actually assigned to a carrier.
- Activity Score: Trestle’s API provides an activity score, indicating the likelihood that the number is currently in use.
- Line Type Information: You can determine whether the number is a landline, mobile, VoIP, etc.
- Carrier Details: The API provides information about the carrier associated with the number.
This enhanced validation process provides several benefits:
- Improved Data Quality: By validating not just the format but also the status of the phone number, you can ensure higher quality data in your system.
- Better User Experience: You can provide more detailed feedback to users about their input.
- Informed Decision Making: The additional data (like line type and carrier) can inform your business processes and communication strategies.
- Fraud Prevention: Identifying prepaid numbers or numbers with low activity scores can help in fraud detection efforts.
Regex vs. API: Quick Comparison #
| Capability | Regex | Phone Validation API |
| Checks number format | Yes | Yes |
| Confirms number is assigned to a carrier | No | Yes |
| Returns carrier name | No | Yes |
| Returns line type (mobile, carrier, fixed or non-fixed VoIP, etc) | No | Yes |
| Indicates likelihood number is connected | No | Yes |
| Detects prepaid use | No | Yes |
Best Practices for Implementation #
When implementing this enhanced validation in your React applications, consider the following best practices:
- Debounce API Calls: Implement debouncing to limit API calls when users are typing, ensuring you stay within Trestle’s usage limits and improving performance.
import { debounce } from 'lodash';
import React, { useState, useCallback } from 'react';
const PhoneValidationForm = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const debouncedValidate = useCallback(
debounce((value) => {
// Call to validatePhone or API here
console.log('Validating:', value);
}, 300),
[]
);
const handleChange = (e) => {
const value = e.target.value;
setPhoneNumber(value);
debouncedValidate(value);
};
return (
<input
type="tel"
value={phoneNumber}
onChange={handleChange}
placeholder="Enter phone number"
/>
);
};2. Progressive Enhancement: Use the basic regex validation as a first pass, then enhance with Trestle’s API for deeper validation. This can help reduce unnecessary API calls.
const basicValidation = (number) => {
const phoneRegex = /^\+?[1-9]\d{1,14}$/;
return phoneRegex.test(number);
};
const handleValidation = () => {
if (basicValidation(phoneNumber)) {
// Proceed with Trestle API validation
validateWithTrestle(phoneNumber);
} else {
setValidationResult({ error: 'Invalid phone number format' });
}
};3. Secure API Key Management: Use environment variables to manage your Trestle API key securely, never exposing it in your client-side code.
// In your .env file
REACT_APP_TRESTLE_API_KEY=your_api_key_here
// In your component
const validateWithTrestle = async (phoneNumber) => {
try {
const response = await axios.get('https://api.trestleiq.com/3.0/phone_intel', {
params: { phone: phoneNumber },
headers: {
'x-api-key': process.env.REACT_APP_TRESTLE_API_KEY,
'Accept': 'application/json'
}
});
// Handle the response
} catch (error) {
// Handle errors
}
};By implementing these best practices, you can create a more efficient, secure, and user-friendly phone validation process in your React applications while maximizing the benefits of Trestle’s API.
Conclusion #
By combining React’s powerful front-end capabilities with Trestle’s comprehensive Phone Validation API, you can create a robust, user-friendly phone validation system. This approach not only ensures the accuracy of phone numbers but also provides valuable insights that can inform your business processes.
Whether you’re building a contact form, a user registration system, or managing a large customer database, this enhanced validation process can significantly improve the quality of your phone number data.
Ready to take your phone number validation to the next level? Sign up for a free Trestle account and start leveraging Phone Validation API with React today.
If you have any questions or need assistance with integration, feel free to contact us.
This user guide was written by Tyler Woodward, Technical Account Manager at Trestle.
Frequently Asked Questions #
Can you validate a phone number in React without an API?
Yes. A regex pattern will catch malformed numbers in a React onChange handler. But regex only checks formatting. It can’t tell you whether a number is currently assigned to a carrier, what line type it is, or whether it’s likely in active use. For data quality, fraud prevention, or compliance use cases, you’ll want an API like Trestle’s Phone Validation API on top of the regex pass.
What’s the best phone validation API for a React app?
The right API depends on what you need to verify. If you want to know a phone number’s line type (mobile, landline, fixed or non-fixed VoIP, etc.), Trestle’s Phone Validation API returns all of that plus a Phone Activity Score and carrier name from a single endpoint. It works in any React app via a standard fetch or axios call, and Trestle offers a free trial so you can test before committing.
Should I call the Phone Validation API on every keystroke?
No. Debounce the call so it only fires after the user stops typing. 300-500ms is a good starting point. You should also run a regex format check first and only call the API when the input passes that check. This pattern (covered in the “Best Practices” section above) keeps your usage within reasonable limits and improves the user experience by avoiding flicker on partial input.