Can I access the default validationMessage of an element when using WebShim Polyfill lib?

Question

When using the HTML5 Validation API it is possible to intercept the error, access the error message and render it differently.

When using the WebShim Polyfill, I would've hoped that this would work in the same way without having to access a customValidationMessage property.

Is there a way WebShim can be configured so we can write consistent code for intercepting these error messages as below.

$("input").on("invalid", function(evt) { evt.preventDefault(); alert(evt.currentTarget.validationMessage); });

... I would expect this code to work in a Polyfill, perhaps I have misunderstood it's setup or something?

The reason I want to do this is so that I can grab all the invalid fields and display the errors in one block, rather than next to each field.

Thanks, Nick

Answer 1

Yes, this is possible. If you setup everything correctly you only have to change your call to validationMessage. Webshims always fixes elements through the jQuery API, not the DOM element itself. Which means you always have to use $.prop to access DOM properties.

$("input").on("invalid", function(evt) { 
    evt.preventDefault(); 
    alert($.prop(evt.target, "validationMessage")); 
});

You can also use eventdelegation:

$(function(){
    $(document).on("invalid", function(evt) {
        var message = $.prop(evt.target, "validationMessage");
        if(message){
            evt.preventDefault();
            alert(message);
        }
    });
});

Note:

1. Eventdelegation for invalid is done through event capturing (which isn't normally used by jQuery). Therefore you have to wait untill polyfill is loaded. (Normally, jQuery's ready event is delayed untill then.)

2. I check if an validationMessage is there, although there was an invalid event. Here is why: There was a spec change and now an invalid event is also triggered on the form element. This is currently only polyfilled in an unstable version of webshims and only for incapable browsers (IE < 12, Safari < 8 ...).