I want to create custom validity rules for HTML input elements (or polyfill unsupported ones). To blend as well as possible into the browser's native validation procedure, I came up with overwriting the input elements' checkValidity method to hook the logic into:
/* input_element is the DOM element to enhance: */
var original_check = input_element.checkValidity.bind(input_element);
input_element.checkValidity = function() {
var original_validity = original_check();
/* run our own check only, if the original check went well */
if (original_validity && ! custom_validity_checker(input_element)) {
trigger_event('invalid', input_element);
return false;
}
return original_validity;
};
Are there any problems with this approach, that I didn't anticipate?
As far as I can tell, the solution is robust to being called several times, because the validity checking functions will be stacked and called one after the other.
But could there be other cases, where checkValidity() not being the native method will bite me back?
