Validation of Custom Fields

We are able to add custom fields but what about an opportunity to validate them. Let's try to implement a custom validation rule.

There is a list of available validate methods, which can be used: `alpha`, `numeric`, `alpha_numeric`, `alpha_dash`, `numeric_dash`, `alpha_numeric_dash`, `format`, `email`, `accepted`, `required`, `in`, `nin`.

We gonna have a look at each of them:

• `alpha` - allows you to validate if a given value contains only alphabetical characters;
• `numeric` - to validate if a given value contains only digits and no other characters;
• `alpha_numeric` -  allows you to validate if a given value contains both alphabetical and digits characters;
• `alpha_dash` - if a given value contains alphabetical characters and a dash;
• `numeric_dash ` - if a given value contains only digits characters and a dash;
• `alpha_numeric_dash` - if a given value contains alphabetical, digits characters and a dash;
• `format` - to validate a given value as a regex expression;
• `email` - check if a given value is an email address;
• `accepted` - a given value can be considered only as `"yes"`, `"on"`, `"1"` `1`, `"true"`, `true`;
• `required` - a filed is required to be filled;
• `in` - a check if a given value exists in a certain range;
• `nin` - a check if a given value doesn't exist in a certain range;

In the following example we will create a custom `Company Code` field, which will have the following properties:

• type - text
• name - stored_customer_company_code
• label - Company Code.

We are going to add this new filed to the `profile_form_start` slot. To see all possible slots turn `Debug slots` option on. Don't forget to put this custom field into the `paymentFormPrefill` section. Let's add all this to the config object and add it as argument to the runWidget function:

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    slots: {
      profile_form_start: [{
        component: "field",
        type: "text",
        name: "stored_customer_company_code",
        label: "payment_form.stored_customer_company_code",
        placeholder: "payment_form.stored_customer_company_code"
      }]
    },
    paymentFormPrefill: {
      stored_customer_company_code: null,
    },
    translations: {
      en: {
        payment_form: {
          stored_customer_company_code: 'Company code',
        },
        validation_errors: {
          stored_customer_company_code: {
            field_has_wrong_format: 'No valid code, only four digits',
            field_is_missing: 'Type a company code',
          }
        },
      },
    },
  });
</script>

Now, let's decide what rules we should use to validate this field. We will define two rules:

1. This field is required to be filled - so we will define the `required` rule.
2. Furthermore the field must consist of four digits. For that we can use the `format` rule.

We are ready to summarize and get down to do that. To validate a custom field we can use the event `afterCreate` and passing the above defined rules to paymentValidations  as in the example below:

function setupCustomFieldValidation(event) {
  var widget = window['widget'] = event.data.api;
  var paymentValidations = window.rnw.tamaro.toJS(widget.computedConfig.paymentValidations);

  
  // adding rules for a custom field
  paymentValidations['stored_customer_company_code'] = {
    required: true,
    format: /\d{4}/
  };
  
  widget.config.paymentValidations = paymentValidations;
}

window.rnw.tamaro.events["afterCreate"].subscribe(setupCustomFieldValidation);

We have to add it like this to merge with existing validation rules. If you just overwrite/extend paymentValidations in config object, you will lose all existing validation rules.