Need a work around for reportValidity()

Question

I wrote a custom javascript/jQuery validation function in .submit and I use the reportValidity function() to get those tooltip bubbles, but learned during development that it was only working fully in Opera and Chrome. Apparently, reportValidity() does not work in IE, Safari, and FF the same way.

In FF, it will at least take the user to the incomplete question, but does not provide an automatic tooltip like chrome and opera does to inform the user.

Safari and IE are clearly validating correctly, but without any indication of any portion being incomplete.

What is the work around for this, i.e. a way to get similar behavior as Chrome or Opera?

Answer 1

Here is what I did:

document.forms[0].getElementsByTagName("input")[0].setCustomValidity("Please fill out at least one of these fields.");
    try {
        document.forms[0].reportValidity();
    }
    catch (e){ //for browsers that don't support reportValidity
        $($('input')[0]).popover({
            placement:'right',
            trigger:'manual',
            html:true,
            content:'Please fill out at least one of these fields.'
        });
        $($('input')[0]).popover('show');
        setTimeout(function () {
            $($('input')[0]).popover('hide');
        }, 4000);
    }
    finally{
        return false;
    }

You can obviously tune the 4 second timeout to meet your needs, or replace it with something else entirely, but the workaround part with the try-catch and popover seemed to do well for me.