Clientside Validation

This module adds clientside validation (aka "Ajax form validation") for all forms and webforms using jquery.validate. The included jquery.validate.js file is patched because we needed to be able to hide empty messages.

Drupal 8

Upgrade to 8.x-2.x

There is one backwards incompatible change. We have renamed the directory name inside libraries to make it work better with Composer. We expected it to be inside libraries/jqueryvalidate and now it is expected inside libraries/jquery-validation. Also the recommendation is to use npm-asset/jquery-validation instead of custom repo (updated in README).

Modules

clientside_validation

This is the core module, all it does is add data- attributes to the HTML
form elements. If an HTML5 attribute exists it is used as is.

clientside_validation_jquery

This modules adds the jQuery Validation Plugin,
to install download the latest version
and extract the archive to the js/lib of this sub module.

If you don't download the library, it will be hot linked to the CDN version.

Extend

If you need support for other contrib modules, you can add a CvValidator plugin
to that module and it will be picked up by the base module.

If you require custom javascript, you can implement hook_clientside_validation_validator_info_alter (see clientside_validation_jquery_clientside_validation_validator_info_alter)

Test it

On simplytest.me, go to Extend and enable both modules.

Testers wanted for Drupal 7 2.x version!

Clientside Validation 7.x-2.x is its beta release stage. It's a complete rewrite of the module using the Libraries API and the CTools modules. Before we can release stable versions we need it to be tested in real-life situations. As far as we are concerned the beta version is stable. It passes all included TestSwarm tests. So please feel free to test it if or when you can.

jQuery Update

The validation plugin used by Clientside Validation does not work well with jQuery 1.5. So if you have jQuery Update installed on your site, select a jQuery version other than 1.5. For more info see #1801764: Clientside Validation breaks AJAX file uploads..

Example

If you want to try out an example of Clientside Validation in combination with the form API, FAPI Validation and/or Vertical Tabs (D6: http://www.drupal.org/project/vertical_tabs, D7: in core) you can download and enable the example module from this sandbox project:

http://drupal.org/sandbox/jelles/1193994 or http://drupal.org/project/1193994/git-instructions (direct link to git instructions tab)

Demo (offline)

Drupal 6:
- ~~Form API~~
- ~~Webform 3.0~~
- ~~FAPI Validation~~
Drupal 7:
- ~~Form API~~
- ~~webform 3.0~~
- ~~FAPI Validation~~
- ~~Vertical Tabs~~

Status

Validation is added to all forms and Webforms
The error messages are displayed the same way as without this module, in a div above the form.
The error messages use the same css classes as drupal does out of the box, so you only have to theme it once.
Supports the following conditions: Fields that
- are required
- have a maximum length
- must have one of specified extensions
- must be one of the allowed values
- can only contain max x elements (checkboxes, multiple selects)
- must contain minimum x elements (checkboxes, multiple selects)
- must be greater than a minimum value
- must be smaller than a maximum value
- must be a number
- must be a decimal
- must equal an other field (Webform Validation)
- can not equal an other field (Webform Validation)
- must equal a specific value
- must be an ean number
- must match a POSIX regex
- must match a PCRE regex
- must be a valid e-mail address
- must be a valid url
- must be alpha (FAPI Validation)
- must be alphanumeric (FAPI Validation), if you write your own regexp, do not use \pL, but use \p{L}
- must be valid IPv4 (FAPI Validation)
- must be "alpha dash" (FAPI Validation)
Note: The FAPI Validation rules come down to matching a PCRE regex
CCK/Fields: textfield, textarea, decimal, float, integer, file and image
Supports most of CCK Date
Supports multiple forms on one page
Added support for Webform Validation
Added support for FAPI Validation
D7: Added support for Field Validation 1.x 2.x supported in latest dev
D7: Added support for References
D6: Added support for node and user reference (CCK)
Added support for Vertical Tabs (for D6: Vertical Tabs)
Added an option to enclose the field name in quotes (defaults to nothing)
Added an option to validate all tabs or only the visible one (defaults to all tabs)
Added an option to specify on which forms to validate all fields (including those hidden) and on which forms only to validate the visible fields (defaults to only visible)
Added an option to specify on which forms to add Clientside Validation (defaults to all forms)
Added an option to specify whether or not to use the minified version of jquery.validate.js (defaults to not)
Checkboxes are working
Now using jquery.validate 1.9
Supports multi page webforms, build-in ones and Webform Ajax Page module
Support added for HTML5 elements, see this issue for more details
Added settings to control position and behaviour of the error messages
Added theming function for the error messages
Allow user to select to which forms the validation has to be added
Added support for Form API's #states