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:
- This field is required to be filled - so we will define the `required` rule.
- 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.
Comments
0 comments
Please sign in to leave a comment.