Validation

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.

Custom Validation Handling

For more control over validation, you have two options:

Validation Callback:

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

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

Custom Event Handler

Event Name: field-validation

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

The message has this object structure:

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

View the full message structure.

Handling Failed Tokenization

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

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.');
        }
});

Netvalve Documentation

Validation

Default Behavior

Custom Validation Handling

Handling Failed Tokenization

See Also

Related content