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.

This tutorial takes you through the following steps:
  1. Cloning and packaging the validation module.
  2. Installing and enabling the validation module.
  3. Testing the validation in the sign up form.

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.

  1. 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
  2. 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

  1. Log in to your Developer Portal as an administrator.
  2. Click Extend > Extend.
  3. Click + Add new module.
  4. Under the Upload a module or theme archive section, click Browse file.
  5. Browse to and select user_field_example.tgz, the packaged custom module that you created earlier. Click Open.
  6. Click Continue.
  7. Click the Enable newly added modules link.
  8. Enter IBM APIC Portal - user field example in the filter box.
  9. Select the IBM APIC Portal - user field example checkbox.
  10. Click Enable.

The module is now installed and enabled.

Testing the validation in the sign-up form

  1. Sign out as the Admin user.
  2. Click Create a new account.
  3. Enter necessary details in all the fields, set Department code to ABC123.
  4. Click Sign up.
  5. Observe the failure message and highlighting on the Department code field.Department code field
  6. Change the Department code field to DEP245, reenter the password and click Sign up to see that a valid code is accepted.

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.