How Do I Invoke Custom Constraint Validation As Part Of The Native Validation Event Flow?

The following is based on testing with Chrome 31 TL;DR: How come the code in this fiddle works on attempted submit, but doesn't in this one on manual invocation? Is there a better

Solution 1:

As far as I am aware, the checkValidity method calls the browser's internal validation, rather than being what the browser's internal validation calls. Thus if you override it the browser won't notice or care.

In my experience, all that is necessary to implement custom validity is to bind to the change event and then call setCustomValidity with the right value. For example,

myinput.addEventListener('change', function(e) {
    if ( ! myCustomValidityCheck() )
        this.setCustomValidity( 'Uh oh, that didn\'t work!' );
    else
        this.setCustomValidity( '' );
})

Whimsical JSFiddle example

Solution 2:

I'll try to summarize my experience:

1. The custom validation checks should be performed both on user data input and on form submission button click.
2. You need using both the setCustomValidity and the checkValidity methods from the HTML5 form validation API.
3. For validation on user data input, you add to the input field element an input event listener that invokes setCustomValidity on the input field. In the argument of setCustomValidity you invoke a suitable check function that returns an empty string if the user input is valid, and a constraint violation message otherwise.
4. For validation on form submission button click, you invoke checkValidity on the form element and continue the submission only if this returns true.

See also my answer to a similar SO question or try my example solution.

Solution 3:

Here is a solution for your problems http://jsfiddle.net/trixta/E7VtD/

1. Use change isntead of input event. input event is great, but does not apply to input[type=file].
2. You should not override checkValidity
3. Use setCustomValidity on dom ready + every change
4. use reportValidity, if available, to report errors or mimic reportValditity by clicking on a submit button

Here is a simple method to make setCustomValidity simpler:

//setCustomValidity is stupid so we improve by adding setCustomValidityRule
$.fn.setCustomValidityRule = function (type, rule) {
    var testRule = function () {
        //only if it's valid or we have set the message our own
        if ($(this).is(':valid') || $.data(this, 'customErrorType' + type)) {
            var message = rule(this);
            this.setCustomValidity(message);
            if (message) {
                $.data(this, 'customErrorType' + type, message)
            } else {
                $.removeData(this, 'customErrorType' + type);
            }
        }
    };
    return this
    //invoke initially
    .each(testRule)
    //and on every change
    .on('customchange.customerror' + type + ' change.customerror' + type, testRule);
};

And here is a method to make reportValidity work in current browsers:

$.fn.reportValidity = function () {
    return this.each(function () {
        var form;
        if (this.reportValidity) {
            this.reportValidity();
        } else {
            form = $($.prop(this, 'form')).add(this).filter('form');
            //checkvalidity is obtrusive sometimes so we use :invalid
            if($(':invalid', form).length){
            $('<input type="submit" />')
                .css({
                    position: 'absolute',
                    left: '-99999px'
                })
                .appendTo(form)
                .click()
                .remove();
            }
        }
    });
};