Question

What I would like to do is the following. I have an image which shows a tooltip on hover. When a field does not pass the validation, I would like to show the default error message aswell as the images’ title in a new paragraph. The tooltip image should then be hidden. When the field then passes validation, the default error message should be hidden again (default behaviour), my paragraph should be hidden and the tooltip image should be shown again.

So, when a field does not pass validation:
– Default validations error message
– Tooltip images’ title

And when a field does pass validation:
– Tooltip image

I got the ‘failed validation’ part figured out but when the field passes validation, the tooltip images’ title is still shown and the tooltip image is hidden. So what I basically need is a callback to a function when some field passes validation.

This is what I’ve got so far:

$(document).ready(function(){

$('form#saveform').validate({

    ignore: ":hidden",
    errorPlacement: function (error, element) {

        var error_td = element.parent('td').next('td');
        var tooltip_img = error_td.find('img.tooltip');

        error_td.append(error);
        error_td.append('<p class="notice">' + tooltip_img.attr('oldtitle') + '</p>');

        tooltip_img.hide();

    }

});

});

Can anyone help me making this work?

Answer 1

I don’t think that the validate plugin would have a callback when the validation is successful. Although it has callbacks to apply and remove error highlighting to/from elements.
So what you could do is:

$('form#saveform').validate({
  highlight: function(element, errorClass, validClass) {
    // add error, hide image
  },
  unhighlight: function(element, errorClass, validClass) {
     // remove error, show image
  }
});