JavaScript Widget 3.0 - Email Validation

The JavaScript Widget 3.0 provides a flexible and powerful email validation system that allows you to configure how Clearout should validate email addresses based on your specific requirements. This section covers the various field setting options available to customize the email validation behavior.

Email Field Setting Options

Find below the various email field setting options that can be configured as part of app creation or by using the customized code

Acceptable Values

  • Accept any Valid email address (default): This is the default setting. It allows any email categorized as valid while blocking disposable email addresses.
  • Accept only Business and Personal email address: In addition to the default setting, this option blocks role-based emails (e.g., support@, help@, etc.).
  • Accept only Business email address: This setting blocks free email providers (e.g., Gmail, Yahoo) along with role-based and disposable emails.
  • Accept only Safe To Send email address: The strictest setting—only emails categorized as Safe To Send: true by Clearout are allowed. Not recommended unless you have high bounce rates and need to capture only emails that are guaranteed to be deliverable. Learn more about Safe To Send
  • Custom: This option allows you to fine-tune the acceptable emails criteria:
    • Block Role Account: This blocks role based email addresses. (Default: false)
    • Block Free Account: This blocks emails from free email providers such as gmail and yahoo (Default: false)
    • Block disposable account: This blocks emails from disposable email providers. (Default: true)
    • Block Unknown status: This blocks emails which Clearout was not able to determine the status of within the stipulated time due to any reason (Default: false)
    • Block Catchall Status: This blocks emails which Clearout determines the status as Catch-all. (Default: false)
    • Safe To Send Only: This only allows emails categorized as Safe To Send: true by Clearout. (Default: false)
    • Block form submission on timeout: This option blocks form submission if Clearout could not validate the email within the given timeout. (Default: false)
    • Block form submission on usage limit crossed: This option blocks form submission if the usage limits set on your app settings are crossed. (Default: false)

Hooks

This option allows you to define custom JavaScript functions that execute either before or after Clearout's form validation.

On Before Verify

This hook is triggered just before Clearout's email validation runs. The function receives two destructured parameters as defined below:

  • email: The value entered in the respective form field.
  • $form: The jQuery-wrapped form element.

The function should return an object with is_acceptable and error_msg properties. Setting is_acceptable to false will consider the input value as invalid with message set on error_msg property.

  • is_acceptable: The validation status of the On Before Verify hook.
  • error_msg: The HTML error message string to be displayed in case of is_acceptable is false.
                    
                      on_before_verify: function({ email, $form }) {
                        let response = { is_acceptable: true, error_msg: '' };
                        
                        // Custom validation logic goes here
                        if (email.includes('example.com')) {
                          response.is_acceptable = false; // Set is acceptable to false to prevent form submission
                          response.error_msg = 'Example domain email are not allowed !!';
                        }
                        
                        return response;
                      }
On After Verify

This hook is triggered just after Clearout's Email validation runs and has returned back with the Clearout's Validation response. The function receives three de-structured params:

  • email: The value entered in the respective form field
  • $form: The jQuery-wrapped form element
  • result: The Clearout's Validation result object

The function should return an object with is_acceptable and error_msg properties. Setting is_acceptable to false will consider the input value as invalid with message set on error_msg property.

  • is_acceptable: The validation status of the On After Verify hook.
  • error_msg: The HTML error message string to be displayed in case of is_acceptable is false.
                    
                      on_after_verify: function({ email, $form, result }) {
                        let response = { is_acceptable: true, error_msg: '' };
                        
                        // Custom validation logic goes here
                        console.log(result);

                        return response;
                      }

Field Selection

This option lets you choose whether Clearout's JS Widget should automatically detect and attach validation to email fields or apply validation only to specific fields of your choice.

By default, the Automatic mode is enabled, allowing Clearout to identify form fields based on various techniques:

  • Element's type is of email
  • Element's name is equal to any one of email, email_address, clearout-email
  • Element has attribute data-clearout-email-field

Optional Fields

In some cases, you may have email fields that are optional—users are not required to fill them in to submit the form. If that's the case, you can set this option to Yes.

Here's how it works:

  • If the field is left empty: The form submission will proceed without validation for that field.
  • If the field is filled: Even though it's optional, the entered value will be validated. The form will only be allowed to submit if the value passes validation based on your configured criteria.

Add More Fields

This option can be used when your form contains multiple email fields, and you want to apply different validation rules to each one individually. By enabling this option, you can create separate validation configurations for each field.

Note: Unless you specifically need different validation rule sets for multiple email fields, do not use this option—even if your form has multiple email fields. The widget is capable of automatically handling such cases under normal conditions.

Testing

For testing purposes, you can use the following test email addresses to verify different validation scenarios without incurring any credit cost. For more details about testing, please refer to our Test Emails.