Phone Validation Implementation Guide

Reduce errors and improve data quality by validating phone numbers at checkout, in contact forms, or during registration.

​

Who Should Use This Guide

For: Business owners and developers integrating phone validation without complex setup. You’ll need: A Loqate API key and basic HTML knowledge. Not covered: Tag-based integrations (see Tag Setup) or pre-built platform integrations (see Integrations).

​

What You’ll Build

A phone validation form that:

• Validates numbers in real-time
• Displays success or error states
• Prevents form submission with invalid numbers
• Works with international phone numbers

​

Quick Start

To set up Phone Validation, you’ll need an API key. Find out how to get yours here.

​

Choose Your Approach

Using Shopify or WordPress? Check pre-built integrations.

​

Add Your Key

Replace YOUR_API_KEY in the code with your actual Loqate API key.

​

Test

1. Open your page
2. Enter +441244657333
3. Validation result appears

---

​

Sample Project: Checkout Integration

This walkthrough shows how to add phone validation to a checkout form. Follow along to see a basic form transform into a validation-enabled checkout.

​

Before: Basic Checkout

A checkout form without validation: This form works, but doesn’t validate phone numbers. Let’s add validation.

---

​

How Phone Validation Works

The complete implementation includes four key components:

​

1. Validation Function

A JavaScript function that sends phone numbers to the Loqate API and returns whether they’re valid. The function handles API requests, error checking, and response parsing.

​

2. Visual Feedback

CSS classes and a message element that show users three states:

• Checking: Yellow background while validating
• Valid: Green background for valid numbers
• Invalid: Red background for invalid numbers

​

3. Real-Time Validation

An event listener on the phone input field that triggers validation when users finish typing (on blur). This provides immediate feedback without requiring form submission.

​

4. Form Submission Control

Logic that prevents form submission if the phone number is invalid, ensuring only validated data is processed.

---

​

Standalone HTML Example

A minimal phone validation form for quick testing: Perfect for:

• Quick API testing
• Learning how phone validation works
• Simple integrations without checkout flows

To use:

1. Copy the code
2. Replace YOUR_API_KEY
3. Save and test with different phone numbers

​

Code on GitHub

If you’d like to browse the code snippets in this implementation guide or clone them, visit the repository on GitHub.

​

Integration Example

Here’s the checkout form with all validation components integrated: To use this code:

1. Copy the code
2. Replace YOUR_API_KEY with your actual Loqate API key
3. Save as an HTML file
4. Open in a browser to test
5. Customize styling to match your brand

Key features in this example:

• Real-time validation on field exit
• Visual feedback for all validation states
• Form submission prevention for invalid numbers
• Success message display for valid submissions
• Clean, production-ready code structure

---

​

Integration Tips

​

Adding to Your Existing Forms

To add phone validation to your current forms:

1. Add the validation function from the integration example to your page’s <script> section
   • Handles API requests and response parsing
2. Add validation styles from the integration example to your page’s <style> section
   • Provides visual feedback (valid/invalid/checking states)
3. Add the validation message element next to your phone input field
   • <span id="phoneValidation"></span>
4. Add the event listeners to trigger validation and control form submission
   • Blur event for real-time validation
   • Submit event to prevent invalid submissions

Reference the integration example above for all the code you need.

​

Country Customization

Change the Country parameter in the API request to validate numbers from different countries:

• 'US' - United States
• 'CA' - Canada
• 'AU' - Australia
• 'GB' - United Kingdom (default in examples)

Or remove the Country parameter entirely to validate international format numbers that include the country prefix (e.g., +441234567890 includes +44 for UK).

​

Validation Timing Options

Current examples use: Validation on field exit (blur event) - validates when users click or tab away from the phone field. Alternative approaches: On button click: Add a separate “Validate” button that triggers validation manually. While typing (debounced): Validate as users type, with a short delay to avoid excessive API calls. Add a 1-second timeout that resets with each keystroke. On form submission only: Validate only when the user submits the form, showing errors before processing.

​

Styling Customization

The examples use minimal styling. Customize the CSS classes (.phone-valid, .phone-invalid, .phone-checking) to match your brand:

• Change colors to match your design system
• Adjust padding and border-radius
• Add icons or animations
• Modify font sizes and weights

---

​

Troubleshooting

​

Invalid API Key

Verify you’ve replaced YOUR_API_KEY with your actual key from your Loqate account.

​

Numbers Not Validating

Check:

• Country parameter matches the number format (Country: 'GB' for UK numbers)
• You have available credits in your account
• API key hasn’t been restricted by domain, IP, or rate limits (check account settings)
• The phone number includes the country prefix if not using the Country parameter (e.g., +44 for UK)

​

Form Not Appearing

Ensure you copied the standalone HTML file including all <style> and <script> sections. The examples are self-contained and include all required code.

​

CORS Errors

The examples must be hosted on a web server, not opened as local file:// URLs. Upload to your website or use a development server like Python’s http.server or Node’s http-server.

---

​

Data Privacy

• Numbers validated through Loqate’s API
• Stored in infrastructure logs for 30 days for operational purposes
• Results returned immediately
• See Privacy Policy for complete details

​

Support

• API Reference
• Support Portal
• Contact

​

Related

• Best Practices
• API Security
• Pricing