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 Webform: Provides Clientside Validation for the Webform and Webform Validation module.

Clientside validation submodules

To configure settings for this module go to admin/config/validation/clientside_validation for Drupal 7 or to admin/settings/clientside_validation for Drupal 6. There are several settings for this module, we will guide you through them.

Minified version

Whether or not to use the minified version of jquery.validate.js
Minified version

Validate options

HTML5 validation (Drupal 7 only)

Since there is a Drupal HTML5 Initiative we added this option to support it. If this option is enabled it will replace the standard html5 validation (for e-mail fields etc.) with Clientside Validation. This might come in handy for users that visit your site with browsers that don't support (all) HTML5 elements yet. This will only work if the Clientside Validation HTML5 submodule is enabled.
HTML5 validation

Validate on submit

Disabling this option disables onsubmit validation, allowing the user to submit whatever he wants, while still validating on keyup/blur/click events (if not specified otherwise).
Validate on submit

Validate on blur

Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid. This means that if this option is enabled, but the validate on submit option is disabled Clientside Validation will mark this form as valid when it is submitted without a user ever entering anything in to the (required) fields. Fields will only be validated when the cursor leaves them if this is the only validate option enabled.
Validate on blur

Validate on key up

Validate elements on key up. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. This means that this option will do nothing if it's the only validate option enabled. Fields need to be marked as invalid before the validation on key up is triggered for this field. This is by design of the jquery.validate plugin.
Validate on key up

Error message settings

Prefix and suffix

In the error messages the field name will be displayed. If you want this name to be between quotes or << and >> for example, you can enter a prefix and suffix for the field name here.
Error message prefix and suffix

Scroll to error message

When you have a large form, your error messages might appear off screen. Enabling this option will make the page scroll to the error messages (if there are any) when the form is submitted. When this option is enabled you can also fill in the scroll speed in milliseconds (the time it will take to scroll from where you are on the page to the error messages).
Scroll to error message

Error message placement

Default location

Here you can select the default location to display your error messages. You can choose between the following options:

  • jQuery selector: This option will place a div containing all the error messages inside the div that matches the jQuery selector entered in the "jQuery selector" field below this option.
  • Top of form: This option will place a div containing all the error messages above the form the error messages are for.
  • Before label: This option will place the error before the label of the matching element
  • After label: This option will place the error after the label of the matching element
  • Before input: This option will place the error before the matching element
  • After input: This option will place the error after the matching element
  • Top of first form: This option will place a div containing all the error messages above the first form. This means that when there are multiple forms on a page, the errors of the second form will be added to the error div of the first form and will be displayed above the first form
  • Custom function: (Advanced) Selecting this option requires you to enter a javascript function name in the textfield "Custom function name" below this option. This function name will be given to the errorPlacement option of jQuery.validate()

Error message default location

jQuery selector:
Error placement jQuery selector

Custom function:
Error placement custom function

Error placement exceptions

For each of the previously mentioned options you can enter form ids (one per line) in the textareas of the "Error placement exceptions" fieldset. Errors for the form matching this form id will appear according to the textarea you entered its form id in. For example if you enter page_node_form in the "Before label" textarea of the "Error placement exceptions" fieldset, all error messages for this form will be displayed before the label of the field they are for, regardless of what the default setting is.
Error message placement exceptions

Paths

Here you can enter paths. Enter one page per line as Drupal paths. The '*' character is a wildcard. Example paths are blog for the blog page and blog/* for every personal blog. <front> is the front page. Then you can select whether you want no clientside validation on these paths, or enable clientside validation for these paths only.
Include or exclude paths

Hidden fields and vertical tabs

Hidden fields

Sometimes you can have hidden fields on a form (collapsed fieldsets etc.). By default, hidden fields will not be validated by clientside validation (required fields that are hidden to the users will not generate an error message if they are empty). Here you can enter form ids (one per line) of forms where hidden fields should be validated.
Validate hidden fields

Vertical tabs

Since vertical tabs are kind of a special form of hidden fields, we added a seperate option for it. Here you can choose whether to validate all vertical tabs at once, or to validate only the selected (visible) vertical tab. If you choose to validate all vertical tabs, there is one side-effect we could not solve, this being that all hidden fields will be validated as well on a form with vertical tabs. (For example if you have a form with vertical tabs and a collapsed fieldset below it.)
Validate vertical tabs

Forms to validate

Besides paths (or pages) you can also include or exclude forms you want to validate. By default all forms will be validated by clientside validation when you enable the module. The two other options allow you to use clientside validation on only those forms of the form ids listed in the textarea (one per line), or on all forms except those forms of the form ids listed in the textarea.
Forms to validate

Comments

jlballes’s picture

Is possible use this module on comments forms?? How??
Thanks!

Jelle_S’s picture

Just enable the Clientside Validation and Clientside Validation Form module and you're all set! ;-)

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."

mchaplin’s picture

How do I validate a decimal/number field?