;
};
**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](/our-services/tag-setup-guide)) or pre-built platform integrations ([see Integrations](/integrations/all-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](/loqate-basics/create-an-api-key/).
### Choose Your Approach
**Use case:** Testing the API or adding to a static page
A self-contained HTML file you can copy and use immediately.
Jump to the [standalone HTML example](#standalone-html-example)
**Use case:** Add validation to your current checkout or contact forms
Step-by-step guide to add validation code to forms you already have.
Jump to the [integration example](#integration-example)
**Using Shopify or WordPress?** Check [pre-built integrations](/integrations/all-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
Examples default to UK (GB) validation. See [Country Customization](#country-customization) to validate other countries.
***
## 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.
This is a detailed walkthrough. If you just want working code, skip to [Integration Example](#integration-example) or [Standalone HTML Example](#standalone-html-example).
### 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
This example defaults to validating UK (GB) numbers. See [Country Customization](#country-customization) to change countries.
## Code on GitHub
If you'd like to browse the code snippets in this implementation guide or clone them, visit the repository on [GitHub](https://github.com/loqate/javascript-docs-sample/tree/main/phone-validation).
## 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
This example defaults to validating UK (GB) numbers. Change the `Country` parameter to validate other countries.
***
## 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 `