[Drupal] How to use Clientside Validation in Drupal?

| | 2 min read

As part of form creation process in one of our recent project we came across one module called 'Client side Validation'. As the name implies the module supports basic as well as most advanced sort of validation methods. Validating the form user inputs is the one task we could not ignore on developing forms for a web project. Let's find out how the 'Client side Validation' will make life easy.

'Client side Validation' is a bundle were it is the main module which contains core functionality. The module depends with al least one of the sub modules for its working. Sub modules include:

  • Clientside Validation FAPI
  • Clientside Validation Field Validation
  • Clientside Validation Form
  • Clientside Validation HTML5
  • Clientside Validation Webform

On installing the module, root user could configure validation settings. The user will be provided with options such as include/exclude validation paths, forms, positioning error message and also form level settings.

In Drupal for adding mandatory form field, you only need to mark field as required. Client side validation overrides Drupal's default validation behaviour. For example


  $form['myfield'] = array(
    '#type' => 'textfield',
    '#title' => 'My Field',
    '#required' => TRUE,
  );

There are other features that are included in this module such as type validation say, numeric, alpha, length, email and more. Example to validate email field:


  $form['myfield'] = array(
    '#type' => 'textfield',
    '#title' => 'My Field',
    '#required' => TRUE,
    '#rules' => array(
      'email', 
      'length[10, 50]',
    ),
  );

Now lets see how we could expose a form to client side validation. This module provides a general configuration form where we could customize module settings. Go to path Configuration > Validation > Client side Validation > General Settings, here under the section 'Forms To Validate' you could select the criteria for validation list as:

  • Validate all forms
  • Only validate forms listed below
  • Validate all forms except those listed below

 

A text box will for provided for inserting form id's on selecting second and third option.

For more detailed study of client side validation the following link may find helpful https://www.drupal.org/node/1324924

Hope you find this article useful. Please feel free to share. Also, if you need any further assistance, please feel free to get in touch with us.