Add error class to form item parent for radio and checkbox fields

I like the idea, but it needs some more work

Moving to 7.x-dev

+++ clientside_validation.js	2012-08-02 10:42:53.147756877 -0400
@@ -296,6 +296,12 @@
+            ¶

whitespace

+++ clientside_validation.js	2012-08-02 10:42:53.147756877 -0400
@@ -296,6 +296,12 @@
+            parent = $(element).parent();

rename parent to $parent, so we see it's a jQuery object.

+++ clientside_validation.js	2012-08-02 10:42:53.147756877 -0400
@@ -296,6 +296,12 @@
+            if (element.className.indexOf('form-radio') >= 0 || element.className.indexOf('form-type-checkbox') >= 0) ¶

better:
$element = $(element);
element.hasClass

+++ clientside_validation.js	2012-08-02 10:42:53.147756877 -0400
@@ -296,6 +296,12 @@
+              parent = parent.parent().parent();

this is very tricky, if the output is using other wrappers.

Here's a method I've come up with to solve this short term in my webform. I have added an extra .check-icon span to my input fields through theme_textfield() and theme_webform_email() and then I put this in my themes custom js-file.

Drupal.behaviors.mywebform = {
    attach: function (clientsideValidation) {
      $('.webform-component input').blur(function() { 
	      if ($('.webform-component input').hasClass('valid') ) {
		var component_id = $(this).parent().attr('id');
			console.log('component_id :' + component_id);
			$('#' + component_id + ' .check-icon').addClass('valid');
		}
	});     
    }
  };

This solution is of course yet incomplete, I have to add selects and radios and also create something to remove "valid" from the .check-icon if the field is no longer valid.

Ok, so my previous approach didn't work out. But a good solution is right here: http://drupal.org/node/1798690
Works perfectly and beautifully for "positive feedback check icon".

Rerolling against the latest:

• Improved coding standards
• Logic to find the correct parents
• Reused the jquery validation errorClass & validClass setting
• Similar code will also work on 7.x-2.x

By default this will add an error class to a div, which can trigger some fun backgrounds from drupal core but the style easily overridden. We are using this:

.form-item input.error, 
.form-item textarea.error, 
.form-item select.error,
.form-item .form-checkboxes.error,
.form-item .form-radios.error {
  border: 2px solid #ed541d;
}
.form-item input.error:focus, 
.form-item textarea.error:focus, 
.form-item select.error:focus {
  outline-offset: 0px;
}
.form-item .form-checkboxes,
.form-item .form-radios {
  padding-left: .5em;
  padding-right: .5em;
}
.form-item .form-checkboxes.error,
.form-item .form-radios.error {
  background-image: none;
  background-color: inherit;
  display: inline-block;
}