Fields validation

Supported validation rules

• alpha
  Field must contain only alphabetic characters.
  Error code: field_is_not_alpha.
• numeric
  Field must contain only numeric characters.
  Error code: field_is_not_numeric.
• alpha_numeric
  Field must contain only alpha-numeric characters.
  Error code: field_is_not_alpha_numeric.
• format
  Field must match the given regular expression.
  Error code: field_has_wrong_format.
• email
  Field must be a valid email address.
  Error code: field_is_not_email.
• date_format
  Field must be a valid date.
  Error code: field_has_wrong_date_format.
• age
  Field must contain a date of birth of a person who reached the given age.
  Error codes: field_min_age_invalid, field_max_age_invalid.
• accepted
  Field must be accepted (e.g. checkbox).
  It check for the following values: 'yes', 'on', '1', 1, 'true', true.
  Error code: field_is_not_accepted.
• required
  Field is required to be filled in.
  Error code: field_is_missing.

There are also some additional validation rules for internal use only, which may return other error codes.

If some of the fields with validation configured are not shown, these validations are skipped.

Example of custom fields with all supported validation rules:

Validation error messages translations

When the validation for particular field is triggered, the error message is displayed, which is taken from the translations based on the field name and the error code.

Tamaro has specific translations defined for its standard fields and the error codes, which are used by the validation rules, applied to these fields. But you can override them for each field if you need.

If some specific translation is missing for the field, the default error message is used.

Custom validation rules

You can define your own custom validation rules, which can be used with custom fields, as well as with standard fields. To do it, you should:

• Define them in the afterCreate event handler of the widget.
• Add them to the widget's validator instance.
• Extend the widget configuration to apply these rules to the specific fields.

Here is an example:

// prettier-ignore
window.rnw.tamaro.events.afterCreate.subscribe((event) => {
  const widget = event.data.api;

  // Define custom validation rule function
  const checkEmailFoobar = ({value}) => {
    if (!value) {
      // if value is blank, skip this validation rule
      return;
    }

    if (value !== 'foo@bar.com') {
      return {
        code: 'email_is_not_foobar',
      };
    }
  };

  // Add it to the widget
  widget.validator.addRule('check_email_foobar', checkEmailFoobar);

  // Extend the widget configuration to add this validation rule to 'stored_customer_email' field
  widget.extendConfig({
    paymentValidations: {
      stored_customer_email: {
        check_email_foobar: true,
      },
    },
  });
});

// prettier-ignore
window.rnw.tamaro.runWidget('.rnw-tamaro-widget', {
  translations: {
    en: {
      validation_errors: {
        stored_customer_email: {
          email_is_not_foobar: 'Only foo@bar.com email is allowed',
        },
      },
    },
  },
});