JavaScript Widget 3.0 - Name Validation

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

Note: Current Gibberish name detection is based on Markov Chaining detection method and the model has been trained and tested for USA person names. You can control the detection accuracy by Gibberish Threshold option

Name Field Setting Options

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

Acceptable Values

Accept any Valid name (default): This is the default setting. It allows any name that passes basic validation.
Accept only Non-Gibberish names:this setting only allows names that are not categorised as Gibberish by Clearout.
Custom: This option allows you to fine-tune the acceptable names criteria:
- Block Gibberish Names: this blocks names that are categorised as Gibberish by Clearout. (Default: false)
- Block form submission on timeout: This option blocks form submission if Clearout could not validate the name 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)

Feedback Messages

This option allows you to customize the feedback (error) messages displayed on forms when an invalid or non-acceptable value is entered in the name field.

Default: A predefined set of feedback messages automatically set by the JavaScript widget.
Custom: Displays all possible feedback message variations for name field, with their default values shown as placeholder text in the input field.

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 name validation runs. The function receives two destructured parameters as defined below:

name: 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({ name, $form }) {
                        let response = { is_acceptable: true, error_msg: '' };
                        
                        // Custom validation logic goes here
                        if (name.includes('test')) {
                          response.is_acceptable = false; // Set is acceptable to false to prevent form submission
                          response.error_msg = 'Test Names are not allowed !!';
                        }
                      
                        return response;
                      }

On After Verify

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

name: 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({ name, $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 name 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 text and name attribute is any one of name, first-name, last-name, first_name, last_name, firstname, lastname, clearout-name
Element has attribute data-clearout-name-field

Gibberish Threshold

Defines the sensitivity level for gibberish detection. Possible values: Off, Low, High (default: High). Higher values apply stricter detection criteria.

Optional Fields

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

Testing

For testing purposes, you can use the following test names to verify different validation scenarios without incurring any credit cost.

`Test Name`	`Gibberish`	`Clearout Status`	`Description`
Elon Musk	false	valid	Valid name with proper formatting
Bill Gates	false	valid	Valid name with proper formatting
John Doe	false	valid	Valid name with proper formatting
James aaa	true	invalid	Contains gibberish text
john19890512	true	invalid	Completely gibberish text
Mr1 Smith	false	invalid	Invalid name with number in title
M~r. Smith	false	invalid	Contains special character (~)
asdnaksjfajksfnjaksf	true	valid	Gibberish name, keyboard smash
qwertyuiop	true	valid	Gibberish name, keyboard smash