Form Guard - Phone Validation

The Form Guard 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 the Guard creation or by using the customized code

Acceptable Values

  • Accept any Valid phone number (default): Allows any valid phone number with a valid format
  • Accept only Mobile phone numbers: Allows only valid mobile phone numbers with a valid format.
  • Accept only Landline phone numbers: Allows only landline phone numbers with a valid format
  • Custom: Allows you to set your own custom validation rules for phone numbers
    • Block Mobile: Block mobile phone numbers from being submitted through the form
    • Block Landline: Block landline numbers from being submitted through the form
    • Block Toll Free: Block toll-freephone numbers from being submitted through the form
    • Block VOIP: Block voip phone numbers from being submitted through the form
    • Block Unknown status: Block unknown phone numbers from being submitted through the form
    • Block form submission on timeout: Block form submission if the phone validation request times out
    • Block form submission on usage limit crossed: Block form submission when phone validation usage limit exceeds

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 Form Guard 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 Guard 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.