Problem/Motivation

I've been banging my head against the wall trying to find out why Clientside Validation works on all my fields except my select lists. I originally thought it had to do with the special handling of "_none" as discussed and fixed here. Then I realized that it has to do instead with the Chosen Plugin For Drupal.

Chosen works by hiding the basic form
element and adding a

element that contains all the options from the select and optionally enabling a search option to the list, which is great for long lists that I have to display to visitors on this form.

The problem is that Clientside Validation ignores hidden fields by default. But in the infinite wisdom of the module creators there is an option to turn on the validation of hidden fields or to process hidden fields on certain forms . So I tried adding a basic node add page to the "Don't ignore hidden fields on the following forms" section. This updates the validate options to:

validate_options.ignore = '';

Which would cause all hidden fields to be validated, which should solve the problem. However, I then receive a general JavaScript error:

Uncaught Error: Syntax error, unrecognized expression: , .horizontal-tab-hidden :input

The error is coming from jQuery, and specifically a Sizzle selector function.

This line ", .horizontal-tab-hidden :input" is being added as an invalid selector which causes the above error and causes all Clientside Validation efforts to fail and the page refreshes. I believe the comma is there to allow for more than one selector being included in the ignore property which is passed to jQuery Validates ignore option. However, if the ignore setting is empty (due to validate hidden fields being set to true) then the comma is the first character encountered, which is an invalid selector.

Proposed resolution

The fix as I see it (please correct me if I'm wrong, I will admit I didn't test every use case), is to check to see if "validate_options.ignore" is equal to an empty string, and if it is, to not include the comma, see below:

validate_options.ignore += (validate_options.ignore == '') ? '.horizontal-tab-hidden :input' : ', .horizontal-tab-hidden :input';

This appears to work under the following conditions:

  • Form ID given to "Don't ignore hidden fields on the following forms"
    • Validate Hidden Fields Un-Checked
    • Validate All Tabs Un-Checked
  • Validate Hidden Fields Checked
    • Form ID Empty
    • Validate All Tabs Un-Checked
  • Validate All Tabs Checked
    • Form ID Empty
    • Validate Hidden Fields Un-Checked

It however fails if both "Validate Hidden Fields" and "Validate All Tabs" are checked.

There is no error in the console, the page simply refreshes, I am not sure if this is expected or not. FWIW, this setting (both boxes checked) also causes Clientside Validation to fail with the original code, so it may be a pre-existing bug, and if so I can file a separate issue.

User interface changes

No UI Changes.

API changes

No API Changes

I have attached with the change to that one line for your review. Please let me know if there is anything else you need to know, or have questions about.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

skadu’s picture

Added patch with issue #.

skadu’s picture

Previous patch had inadvertently removed an empty line. This patch re-introduces the empty line.

dvasquez’s picture

Hello people. Blessing for all you. I want to know if there is a patch for fixing this for "multiple select" widget too.
I have a node with tags option, and there is an optiion for "_none".

Thanks if you can help me!

JeroenT’s picture

Status: Active » Needs review
JeroenT’s picture

Version: 7.x-1.39 » 7.x-1.x-dev
FileSize
583 bytes

Created a new patch for 7.x-1.x

undertext’s picture

Updated patch for current 7.x-1.x.
Ideally should be picked up to 2.x branch too.

  • Jelle_S committed 5c45613 on 7.x-1.x authored by undertext
    Issue #2293259 by skadu, JeroenT, undertext: Issues Validating Hidden...
Jelle_S’s picture

Version: 7.x-1.x-dev » 7.x-2.x-dev
Status: Needs review » Patch (to be ported)
leducvin’s picture

Status: Patch (to be ported) » Needs review
leducvin’s picture

Title: Issues Validating Hidden Fields (Chosen Plugin) » Issues Validating Hidden Fields and Chosen Plugin Compatibility
FileSize
2.52 KB

How about this patch for 7.x-2.x-dev? I've included the modifications made in #6, so that when ones to validate all hidden fields, the javascript error mentioned in the issue summary does not occur.

I also included some chosen-specific fixes that worked for me.

Namely, I wanted the default validation behavior to ignore elements hidden by chosen only. And only when the option to validate hidden elements is checked in clientside_validation are ALL hidden elements validated.

There was also a problem for me where the chosen fields were not being highlighted when in error (and, vice-versa, unhighlighted). Furthermore the error message on the form would not hide or show dynamically upon changing the value of the chosen field. I added some javascript to fix those problems.

I hard-coded the classes used by the Drupal chosen module ("chosen-processed" and "chosen-container"). I don't know if it's an acceptable approach. I'm just a beginner at this, so I'd appreciate some review.

leducvin’s picture

Oops wrong comment number in patch name. Re-uploading.

lokapujya’s picture

Status: Needs review » Needs work

Ran into this (or similar) issue and wrote custom validation code and then code to append the validation error list item to the list of validation errors. But, enabling the validation on the hidden fields seems like a better solution.

Also, it might be a good idea to create a new issue to make the hidden fields work automatically (or have a way for it to work with chosen) like the proposed 7.2 patch.

Regarding the 7.2 latest patch:

  1. +++ b/js/clientside_validation.js
    @@ -258,6 +258,11 @@
    +          // Handle unhighlighting for chosen Drupal module
    

    Comments need a period.

  2. +++ b/js/clientside_validation.js
    @@ -542,7 +559,8 @@
    +        // Patch found at https://www.drupal.org/project/clientside_validation/issues/2293259#comment-11287885
    

    Can remove this comment.

Suresh Prabhu Parkala’s picture

Status: Needs work » Needs review
FileSize
2.42 KB
2.16 KB

Tried to update the patch as per mentioned in #12. Please review.