Clientside Validation Usage

The main module (Clientside Validation) provides the core functionality for Clientside Validation. However, it does nothing by itself, it needs at least one of its submodules to provide any real functionality. The submodules are:

  • Clientside Validation FAPI: Provides Clientside Validation for the Form API Validation module.
  • Clientside Validation Field Validation: Provides Clientside Validation for the Field validation module (Drupal 7 only).
  • Clientside Validation Form: Provides Clientside Validation for standard Form API elements.
  • Clientside Validation HTML5: Provides Clientside Validation for HTML5 elements (see Drupal HTML5 Initiative, Drupal 7 only).

Clientside Validation API


Some modules allow users to define extra validation rules defined in a hook. (e.g hook_webform_validation_validators()). To support these custom rules, clientside validation has its own hook, hook_clientside_validation_rule_alter. We had to use an 'alter' hook because module_invoke and module_invoke_all does not support passing arguments by reference, drupal_alter does.

If you want to add support for your custom validation rules defined for webform_validation, fapi_validation or field_validation, you can use this hook. Every validation rule that is defined for any of these modules and is not implemented as standard by clientside_validation is passed through to this hook (given that the related clientside validation module is enabled and that clientside validation is enabled for the specific form).

The first parameter to this hook is an array. This array, consitently named $js_rules, is passed by reference throughout the entire module and is the key to the entire functionality of this module.

The second parameter is the form element or webform component (dependend on third parameter)

The third parameter, named $context, is a structured array. It consists of the following keys:

  • 'type': The type of form validation we are dealing with. Can be either 'webform', 'fapi', 'field_validation' or 'element_validate'.

Clientside Validation Code Examples

Creating custom validation rules


Let's say you have written a custom PHP validator for the Webform Validation module that looks like this (assuming your custom module is named potpourri):


 * Implementation of hook_webform_validation_validators().
function potpourri_webform_validation_validators() {
  return array(
    'phonefield' => array(
      'name' => "Phonefield",
      'component_types' => array(
            'description' => 'Check phone number'

 * Implementation of hook_webform_validation_validate().
function potpourri_webform_validation_validate($validator_name, $items, $components, $rule) {
  if ($items) {
        $errors = array();
    switch ($validator_name) {
      case 'phonefield':
                foreach ($items as $key => $val) {
          if ($val && (!isTelefon($val))) {
            $errors[$key] = t("%value is not a telephone.", array('%value' => $val));
        return $errors;

 * Validation callback function.
function isTelefon($text) {
    return preg_match('/^(\+){0,1}(\([0-9]+\))?[0-9_\-\/]{6,}$/', str_replace(' ', '', $text));

Clientside Validation Documentation

Here you can find the documentation for Clientside Validation. This module adds clientside validation (aka "JavaScript form validation") for all forms and webforms using jquery.validate.

See also issues marked as documentation (which frequently started out as support requests).

Subscribe with RSS Subscribe to RSS - clientside validation