Page Comparison

The SDK includes built-in validation that prevents form submission if fields are invalid.

Default Behavior

The form will not submit unless all fields pass validation
Invalid fields will display in red (unless overridden in style properties)
Validation occurs on the input blurevent, as well as after the submit button is clicked.

...

Code Block

language	js

function customValidate(message) {
    if (!message.success) {
        // Handle invalid field
        showErrorconsole.log(`${message.message);fieldName} - validation failed)
    }
}

Netvalve.initTokenFields({
    formId: 'paymentForm',
    onValidate: customValidate
});

Custom Event Handler

Event Name: field-validation

Code Block

language	js

window.addEventListener('field-validation', (event) => {
  const message = event.detail;
  // Handle validation result
});

...

Code Block

language	js

  {
      type: 'field-validation',
      fieldName: 'cardNumber' | 'cardCvv' | 'cardExpiry',
      success: boolean,
      message: string,
      paymentToken: string
  }

...

In rare cases where tokenization fails on the Netvalve server, the form will not submit even if the validation . You can handle these cases using the tokenization event:

Event Name: field-tokenization

Code Block

language	js

window.addEventListener('field-tokenization', (event) => {
        const result = event.detail;
        // result structure:
        {
            type: 'field-tokenization',
            fieldName: 'cardNumber' | 'cardCvv' | 'cardExpiry',
            success: boolean,
            message: string,
            paymentToken: string
        }

        if (!result.success) {
            showError('Failed to process card details.');
        }
});

Version	Old Version 1	New Version 2
Changes made by	Kyle Robinson	Kyle Robinson
Saved on	Dec 20, 2024	Dec 20, 2024

Versions Compared

Key

Default Behavior

See Also