Unable to set cuctom html5 validation message

Question

I am trying to use browser validation messaging. I am not able to define a custom message when 2 fields are NOT identical.

My situation is that i have to test when the field IS valid, so i used jquery on.blur to test, but for some reason, the message is empty.

Try entering 2 valid but different email addresses. The expected result is supposed to be "Test why not working" has a browser message.

Working jsFiddle of my situation

HTML:

<form id="newsletter_form" class="form" role="form" name="newsletter_form" method="post" action="/" autocomplete="off">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <input type="email" class="form-control" name="email" id="email" value="" maxlength="250" placeholder="email" aria-required="true" required="required" />
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <input type="email" class="form-control" name="confirm_email" id="confirm_email" value="" maxlength="250" placeholder="confirm email" aria-required="true" required="required" />
        </div>
    </div>
    <input type="submit" class="btn submit btn-default" value="submmit!" />
</form>

JAVASCRIPT:

$('form #email').on('change invalid', function () {
    var field = $(this).get(0);
    field.setCustomValidity('');
    if (!field.validity.valid) {
        field.setCustomValidity("custom email invalid");
    }
});


/* THIS IS MY BUGGY ONE */
$('form #confirm_email').on('blur valid', function () {
    var field = $(this).get(0);
    field.setCustomValidity('');
    if ($("#email").val() != $("#confirm_email").val()) {
        /* i tried setting the field to invalid, nothing */
        //field.validity.invalid;
        //alert('s');
        field.setCustomValidity("test why not working");
    }
});

$('form #confirm_email').on('change invalid', function () {
    var field = $(this).get(0);
    field.setCustomValidity('');
    if (!field.validity.valid) {
        field.setCustomValidity("custom error message");
    }
});

I tried jquery.on(change valid .. and so on, i get the alert() bot not the changed text.

Any help will be appreciated, i am getting bored of this 'bug'?

Answer 1

but for some reason, the message is empty.

That is because you are explicitly setting it to be empty:

 field.setCustomValidity(''); 

in your "custom error message" handler that is used to grump about the invalid email. That handler is executed after the 'blur valid' , and will always reset what happened before. You can try it by uncommenting above line.

Any help will be appreciated

Check both reasons in the same handler:

$('form #confirm_email').on('change valid invalid', function () {
    // var field = $(this).get(0); -- don't do this!!! field = this.

    this.setCustomValidity('');
    if (!this.validity.valid) {
        this.setCustomValidity("custom message for standard errors");
    } else if ($("#email").val() != this.value) {
        this.setCustomValidity("test now working");
    }
});

( updated demo )