;
};
Reduce bounced emails and improve data quality by validating email addresses at checkout, in contact forms, or during registration.
## Who Should Use This Guide
**For:** Business owners and developers integrating email 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
An email validation form that:
* Validates email addresses in real-time
* Displays success or error states
* Prevents form submission with invalid emails
* Detects disposable and high-risk addresses
***
## Quick Start
### Get Your API Key
To set up Email 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 [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 [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 `test@example.com`
3. Validation result appears
The API validates email format, domain existence, and account validity where possible.
***
## Sample Project: Checkout Integration
This walkthrough shows how to add email 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 email addresses.** Let's add validation.
***
## How Email Validation Works
The integration includes four key components:
### 1. Validation Function
A JavaScript function that sends email addresses to the Loqate API and returns validation results. The function handles API requests, timeout configuration, 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 emails
* **Invalid:** Red background for invalid or high-risk emails
### 3. Real-Time Validation
An event listener on the email 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 email address is invalid, ensuring only validated data is processed.
***
## Standalone HTML Example
A minimal email validation form for quick testing:
**Perfect for:**
* Quick API testing
* Learning how email validation works
* Simple integrations without checkout flows
**To use:**
1. Copy the code
2. Replace `YOUR_API_KEY`
3. Save and test with different email addresses
Test with various email formats including disposable addresses to see different validation responses.
***
## 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/email-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 emails
* Success message display for valid submissions
* Clean, production-ready code structure
This example includes a 15-second timeout for validation. Adjust the timeout parameter based on your needs.
***
## Integration Tips
### Adding to Your Existing Forms
To add email validation to your current forms:
1. **Add the validation function** from the integration example to your page's `