Question

I have a registration form leveraging xVal to handle all validation on the form. It works really well, with one exception: the user doesn’t get feedback because another element on the page (a tip telling the user that their username will be their email address) draws on top of the span element xVal spits out when it notices a problem.

If I had a way to detect when xVal has a problem with the email field, I could just toggle the visibility of that tooltip and be on my way, but I’m not sure how to do so. I know that xVal uses jquery.validate.js under the hood; is there an event or something I could tie into to do this?

Answer 1

Without really knowing xVal and how/if you can easily set custom options for the jQuery validation you would do the following if just using the jQuery Validation plugin.

You would hook up the showErrors callback and/or the invalidHandler callback

Check the jQuery Validation Plugin options documentation for more info

e.g. something like this should work (but it’s trickier to know the error is no longer there)

$(".yourformselector").validate({
    showErrors: function(errorMap, errorList) {
        var check = jQuery.inArray($("#idofemailfield").get(0), errorList);
        if(check === undefined |< check === -1) {
            //hide the tooltip
        }
        this.defaultShowErrors();
    }
});