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

Jelle_S’s picture

Component: Miscellaneous » Documentation
Category: feature » support

You can achieve this like so:
my_module.module:

/**
 * 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 :-)

remkovdz’s picture

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!

attiks’s picture

Category: support » feature

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

remkovdz’s picture

Great.

remkovdz’s picture

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.

leanderl’s picture

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

sandboxpl’s picture

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);
remkovdz’s picture

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.

attiks’s picture

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

doxigo’s picture

Issue summary: View changes

so is there a possibility to have this as a feature in module itself ?

lamp5’s picture

Now you have error class and valid class and you can style your form elements what you want.