set custom validity on input always returns invalid

Question

I am trying to setCustomValidity on input elements to my local language. This ends up input.checkValidity()' or 'input.validity.valid always be false

Code:

$(document).ready(function() {

    $('#signup-form *').filter(':input:not([type=hidden])').each(function() {

        var $element = this;
        switch($element.id) {
            case 'email':
                $element.setCustomValidity('some msg1');
                break;
            case 'password':
                $element.setCustomValidity('some msg2');
                break;
            case 'confirmPassword':
                $element.setCustomValidity('some msg3');
                break;
            default:
                $element.setCustomValidity('some msg4');
                break;
        }
    });


    document.addEventListener('input', function(e){
            e.preventDefault();
            var $input = e.target;
            if (!$.nodeName(input, 'input')) return;
            var $element = $(input).parent();
            var $_e = $element.context.id;
            if($input.checkValidity()) {
                $element.removeClass('invalid');
                $element.parent().removeClass('invalid');
            } else {
                $element.addClass('invalid');
                $element.parent().removeClass('invalid');
            }
    }, false);

}

UPDATE

Found this OS answer to be useful as part of my question...