JavaScript Widget 3.0 - Phone Validation

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

Phone Field Setting Options

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

Acceptable Values

  • Accept any Valid phone number (default): This is the default setting. It allows any phone number categorized as valid.
  • Accept only Mobile phone numbers: This setting only allows mobile phone numbers.
  • Accept only Landline phone numbers: This setting only allows landline phone numbers.
  • Custom: This option allows you to fine-tune the acceptable phone numbers criteria:
    • Block Mobile: This blocks mobile phone numbers. (Default: false)
    • Block Landline: This blocks landline phone numbers. (Default: false)
    • Block Toll Free: This blocks toll-free phone numbers. (Default: false)
    • Block VOIP: This blocks VOIP phone numbers. (Default: false)
    • Block Unknown status: This blocks phone numbers which Clearout was not able to determine the status of within the stipulated time due to any reason (Default: false)
    • Block form submission on timeout: This option blocks form submission if Clearout could not validate the phone number 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 Phone validation runs. The function receives two destructured parameters as defined below:

  • phone: 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({ phone, $form }) {
                        let response = { is_acceptable: true, error_msg: '' };
                        
                        // Custom validation logic goes here
                      
                        return response;
                      }
On After Verify

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

  • phone: 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({ phone, $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 phone 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 tel
  • Element's name is equal to any one of clearout-phone, mobile, phone, telephone, mobilephone
  • Element has attribute data-clearout-phone-field

Optional Fields

In some cases, you may have phone 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 phone 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 phone fields, do not use this option—even if your form has multiple phone fields. The widget is capable of automatically handling such cases under normal conditions.

Testing

For testing purposes, you can use the following test phone numbers to verify different validation scenarios without incurring any credit cost. For more details about supported countries and phone number formats, please refer to our Supported Countries page.