Skip to main content
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) or pre-built platform integrations (see 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.

​
Choose Your Approach

Use case: Testing the API or adding to a static pageA self-contained HTML file you can copy and use immediately.Jump to standalone HTML example
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 [email protected]
  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 or 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.

​
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 <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 email input field
    • <span id="emailValidation"></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.

​
Timeout Customization

The Timeout parameter controls how long the API attempts validation (in milliseconds):
  • Default: 15000 (15 seconds)
  • Minimum: 1 millisecond
  • Maximum: 15000 milliseconds
Recommended: Use at least 5 seconds (5000) to minimize timeout responses. 
body: new URLSearchParams({
    Key: apiKey,
    Email: email,
    Timeout: 5000  // 5 seconds
})

​
Validation Timing Options

Current examples use: Validation on field exit (blur event) - validates when users click or tab away from the email 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.

​
Handling Response Codes

The API returns different response codes indicating validation status:
CodeMeaningAction
ValidEmail fully validatedAccept the email
Valid_CatchAllDomain validated, account uncertainAccept with caution
InvalidEmail is invalidReject the email
TimeoutValidation incompleteRetry with higher timeout
Example handling: 
const result = await validateEmail(email);

if (result.ResponseCode === "Valid") {
    // Accept email
    showSuccess("Email validated successfully");
} else if (result.ResponseCode === "Valid_CatchAll") {
    // Accept but flag for review
    showWarning("Email validated (catch-all domain)");
} else if (result.ResponseCode === "Timeout") {
    // Retry or accept with warning
    showWarning("Validation timeout - please try again");
} else {
    // Reject email
    showError("Invalid email address");
}

​
Risk Assessment

Use the Risk field to identify potentially problematic emails:
  • Low - Safe to send
  • Medium - Use caution
  • High - Likely to bounce
  • Unknown - Unable to determine
Check disposable emails: 
if (result.IsDisposableOrTemporary) {
    showWarning("Disposable email detected");
}

​
Styling Customization

The examples use minimal styling. Customize the CSS classes (.email-valid, .email-invalid, .email-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.

​
Emails Not Validating

Check:
  • You have available credits in your account
  • API key hasn’t been restricted by domain, IP, or rate limits (check account settings)
  • Timeout value is sufficient (recommended: at least 5 seconds)
  • Network connection is stable

​
Timeout Responses

If you’re getting frequent timeout responses:
  1. Increase the Timeout parameter (try 10-15 seconds)
  2. Check your network connection
  3. Verify the email domain is accessible

​
Form Not Appearing

Ensure you copied the complete 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

  • Email addresses 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