Hi, is it possible to show something like a check when a user succesfully inputs a field? This is known to increase conversions. Thanks!

Comments

Component:Miscellaneous» Documentation
Category:feature» support

You can achieve this like so:
my_module.module:

<?php
/**
* Implements hook_form_alter().
*/
functionmy_module_form_alter(&$form, &$form_state) {
 
$settings['img'] = base_path() . drupal_get_path('module', 'my_module') . '/img/check.gif';
 
$form['#attached']['js'][] = array(
   
'data' => array('my_module' => $settings),
   
'type' => 'setting',
  );
 
$form['#attached']['js'][drupal_get_path('module', 'my_module') . '/js/my_module.js'] = array();
}
?>

my_module.js:

//jQuery wrapper
(function ($) {
  //Define a Drupal behaviour with a custom name
  Drupal.behaviors.myModule = {
    attach: function (context) {
      $(document).bind('clientsideValidationInitialized', function() {
        for (var formid in Drupal.myClientsideValidation.validators) {
          if (Drupal.myClientsideValidation.validators.hasOwnProperty(formid)) {
            Drupal.myClientsideValidation.validators[formid].settings.highlight = function(element, errorClass, validClass) {
              $('#img-' + $(element).attr('id')).remove();
            };
            Drupal.myClientsideValidation.validators[formid].settings.unhighlight = function(element, errorClass, validClass) {
              if (!$('#img-' + $(element).attr('id')).length) {
                $(element).after('<img src="' + Drupal.settings.my_module.img + '" id="img-' + $(element).attr('id') + '"/>');
              }
            };
          }
        }
      });
    }
  }
})(jQuery);

I hope this helps :-)

Wow, seems to work indeed, thanks a lot!

If I may ask for a tiny favor: is it also possible to have the check appear instantly when the input is valid. Right now, it appears when moving out of the field. Also it would be great if this could be assigned to specific forms.

But thanks again, this works great already!

Category:support» feature

Turning this into a feature request, so we can see if we can add it and allow override per form.

Great.

Great! In that case you might also be interested to know this particular approach (I just copied the above code) doesn't apply a red border to fields which could not be validated.

Hey! Thanks one million times for this! I've been working all day to get this to work and this solves it!

Yep, it's great, thanks a lot too ;)
I've added new lines to toggle classes of validated inputs,
in my case it helps to style elements for browser w/o css3 support:

//jQuery wrapper
(function ($) {
  //Define a Drupal behaviour with a custom name
  Drupal.behaviors.clientside_validation_js_bonus = {
    attach: function (context) {
      $(document).bind('clientsideValidationInitialized', function() {
        for (var formid in Drupal.myClientsideValidation.validators) {
          if (Drupal.myClientsideValidation.validators.hasOwnProperty(formid)) {
            Drupal.myClientsideValidation.validators[formid].settings.highlight = function(element, errorClass, validClass) {
              $('#img-' + $(element).attr('id')).remove();
              //toggle classes
              $(element).addClass('error');
              $(element).removeClass('valid');
              $('.clientside-error').insertAfter(element);
            };
            Drupal.myClientsideValidation.validators[formid].settings.unhighlight = function(element, errorClass, validClass) {
              if (!$('#img-' + $(element).attr('id')).length) {
                $(element).after('<img src="' + Drupal.settings.clientside_validation_js_bonus.img + '" id="img-' + $(element).attr('id') + '"/>');
                //toggle classes
                $(element).removeClass('error');
                $(element).addClass('valid');
              }
            };
          }
        }
      });
    }
  }
})(jQuery);

Are you planning on implementing this module-wide? I mean: this code works fine for simple input, but I think it should also consider email validation etc.? Also, please see #5 and config per form would be awesome.

I think this would be a great feature of this module.

If somebody can provide a patch, I'm more than happy to review or guide.