Tutorial: Adding validation to a field on the sign-up form
You might want to add extra validation to a field to help your Developer Portal users. For example, you might want to validate a department name, employee ID, or similar data when a user registers for an account on the portal.
Before you begin
You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. You must have completed the tutorial about Adding a field to the sign up form, where you added a Department code field to the Sign-up form.About this tutorial
In this tutorial, you add some validation to the Department code field on
the Sign-up form. This is a required field for all portal users and is a string of the format
DEPnnn
, where DEP
is the string prefix and nnn
is
a three-digit number, for example, DEP123
. The validation is done by using a custom
module that is already available in IBM APIC Portal - addons. However, for more information, see
Custom module development: creating a module skeleton.
Look at the files we will use in this link IBM APIC Portal - addons.
- user_field_example.info.yml - this is the metadata for the module, defining
things like the name and version, and containing other important information that is required by
Drupal to import and enable the module.
name: 'IBM APIC Portal - user field example' type: module description: 'IBM API Connect Developer Portal tutorial - Example of validating a custom user field' package: 'Custom' core_version_requirement: ^8 || ^9 || ^10 version: 1.0.0 project: 'user_field_example' dependencies: - ibm_apim - auth_apic
- user_field_example.module - this contains a validation function and adds
this to the Sign-up form by using the
hook_form_alter
function.<?php use Drupal\Core\Form\FormStateInterface; /** * Implementation of hook_form_alter() to alter the Sign up form */ function user_field_example_form_alter(&$form, FormStateInterface $form_state, $form_id) { if ($form_id === 'user_register_form' ) { $form['#validate'][] = 'user_field_example_validate_department_code'; } } /** * Validate the Department code field on the Sign up form. * * Valid entry = DEPnnn * where n = single figure digit. */ function user_field_example_validate_department_code($form, &$form_state) { $dept_code = $form_state->getValue('field_department_code')[0]['value']; $valid = preg_match('/^DEP\d{3}$/', $dept_code); if (!$valid) { $form_state->setErrorByName('field_department_code', t('Invalid department code.')); } }
Cloning and packaging the validation module
Validation is added to the Department code
field on the Sign-up form by using a
custom module.
- Clone the custom module. Here is an example command if you are using Mac and
Linux:
git clone https://github.com/ibm-apiconnect/devportal-addons
- Package up the custom module.
cd devportal-addons/apic_v10/modules tar -czf user_field_example.tgz user_field_example/
Installing and enabling the validation module
- Log in to your Developer Portal as an administrator.
- Click .
- Click + Add new module.
- Under the Upload a module or theme archive section, click Browse file.
- Browse to and select
user_field_example.tgz
, the packaged custom module that you created earlier. Click Open. - Click Continue.
- Click the Enable newly added modules link.
- Enter IBM APIC Portal - user field example in the filter box.
- Select the
IBM APIC Portal - user field example
checkbox. - Click Enable.
The module is now installed and enabled.
Testing the validation in the sign-up form
What you did in this tutorial
You added some validation to the Department code field on the Sign-up
form, then tested the form to ensure that the Department code
field accepts only
codes in the format of DEPnnn
.
In reality, you would need to add this configuration in such a way that it is available for all sites. To achieve this availability, you would include the configuration in your custom module. For more information, see Drupal custom modules.