Event Listeners

Verified Event

The verified event is dispatched when email validation is complete, whether the email was accepted or rejected.

Event Detail

{
  accepted: boolean;           // Whether the email passed validation rules
  message: string;             // Human-readable message
  verificationData: {
    body: string;              // JSON string of validation response
    status: number;            // HTTP status code (200)
  }
}

Basic Example

document.querySelector('input[type=email]').addEventListener('verified', function(event) {
  console.log('Verification complete:', event.detail);

  if (event.detail.accepted) {
    // Email is valid and accepted
    console.log('Email accepted!');
  } else {
    // Email was rejected
    console.log('Rejection reason:', event.detail.message);
  }
});

Parse Validation Data

document.querySelector('#email').addEventListener('verified', function(event) {
  // Parse the detailed validation response
  const validationData = JSON.parse(event.detail.verificationData.body);

  console.log('Email:', validationData.email);
  console.log('Is valid:', validationData.isValid);
  console.log('State:', validationData.state);
  console.log('Is disposable:', validationData.disposable);
  console.log('Is role account:', validationData.roleAccount);
  console.log('Is free provider:', validationData.freeProvider);

  // Check for typo suggestions
  if (validationData.suggestion) {
    console.log('Did you mean:', validationData.suggestion);
  }
});

Prevent Form Submission

const form = document.querySelector('#signup-form');
const emailInput = form.querySelector('input[type=email]');
let emailValid = false;

emailInput.addEventListener('verified', function(event) {
  emailValid = event.detail.accepted;
});

form.addEventListener('submit', function(event) {
  if (!emailValid) {
    event.preventDefault();
    alert('Please enter a valid email address');
  }
});

Show Custom UI

document.querySelector('#email').addEventListener('verified', function(event) {
  const statusDiv = document.querySelector('#custom-status');

  if (event.detail.accepted) {
    statusDiv.className = 'status-success';
    statusDiv.textContent = 'Email verified!';
  } else {
    statusDiv.className = 'status-error';
    statusDiv.textContent = event.detail.message;
  }
});

Track Analytics

document.querySelectorAll('input[type=email]').forEach(function(input) {
  input.addEventListener('verified', function(event) {
    const data = JSON.parse(event.detail.verificationData.body);

    // Track in your analytics
    analytics.track('Email Validated', {
      accepted: event.detail.accepted,
      state: data.state,
      isDisposable: data.disposable,
      isFree: data.freeProvider,
      isRole: data.roleAccount
    });
  });
});

Error Event

The error event is dispatched when validation fails due to an API error, rate limit, or timeout.

Event Detail

{
  status: number;    // HTTP status code or error code
  message: string;   // Error message
}

Basic Example

document.querySelector('input[type=email]').addEventListener('error', function(event) {
  console.error('Validation error:', event.detail);
});

Handle Rate Limits

document.querySelector('#email').addEventListener('error', function(event) {
  if (event.detail.status === 429) {
    console.log('Rate limit reached');

    // Show custom message
    const notice = document.querySelector('#rate-limit-notice');
    notice.style.display = 'block';
  }
});

Handle Timeouts

document.querySelector('#email').addEventListener('error', function(event) {
  if (event.detail.status === 408) {
    console.log('Validation timed out');

    // Maybe retry or show manual verification option
    showManualVerificationOption();
  }
});

Fallback for Errors

const emailInput = document.querySelector('#email');

emailInput.addEventListener('error', function(event) {
  console.error('Validation failed:', event.detail.message);

  // Fallback to basic format validation
  if (emailInput.validity.valid) {
    // Email format is valid, allow submission despite API error
    emailInput.setCustomValidity('');
  }
});

Multiple Inputs

When you have multiple email inputs on a page, you can attach listeners to each one:

document.querySelectorAll('input[type=email]').forEach(function(input) {
  input.addEventListener('verified', function(event) {
    console.log(`Verified ${input.name}:`, event.detail.accepted);
  });

  input.addEventListener('error', function(event) {
    console.error(`Error in ${input.name}:`, event.detail);
  });
});

Event Bubbling

Both events bubble up the DOM, so you can use event delegation:

// Listen at document level
document.addEventListener('verified', function(event) {
  if (event.target.matches('input[type=email]')) {
    console.log('An email was verified:', event.target.value);
  }
});

// Or at form level
document.querySelector('#signup-form').addEventListener('verified', function(event) {
  if (event.target.name === 'email') {
    // Handle main email verification
  }
});

Complete Example

Here's a complete example showing how to use both events together:

<form id="signup-form">
  <div>
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" required>
    <div id="email-status"></div>
  </div>
  <button type="submit">Sign Up</button>
</form>

<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
  verifyforge('apiKey', 'your_public_api_key');
  verifyforge('allow', {
    states: ['deliverable', 'risky'],
    disposable: false
  });

  const emailInput = document.querySelector('#email');
  const statusDiv = document.querySelector('#email-status');
  const form = document.querySelector('#signup-form');
  let emailAccepted = false;

  // Handle successful verification
  emailInput.addEventListener('verified', function(event) {
    emailAccepted = event.detail.accepted;

    if (event.detail.accepted) {
      statusDiv.className = 'success';
      statusDiv.textContent = 'Email verified!';
    } else {
      statusDiv.className = 'error';
      statusDiv.textContent = event.detail.message;
    }

    // Track in analytics
    analytics.track('Email Verified', {
      accepted: event.detail.accepted
    });
  });

  // Handle validation errors
  emailInput.addEventListener('error', function(event) {
    emailAccepted = false;
    statusDiv.className = 'warning';

    if (event.detail.status === 429) {
      statusDiv.textContent = 'Verification limit reached. Please try again later.';
    } else {
      statusDiv.textContent = 'Could not verify email. Please check and try again.';
    }

    // Track errors
    analytics.track('Email Validation Error', {
      status: event.detail.status,
      message: event.detail.message
    });
  });

  // Prevent submission if email not accepted
  form.addEventListener('submit', function(event) {
    if (!emailAccepted) {
      event.preventDefault();
      alert('Please enter a valid email address before submitting.');
    }
  });
</script>