HTML5/JS/jQuery: On invalid input, mark a different (arbitrary) element as invalid

Question

I am trying to create one of those standard new password forms, where you type the new password once and then a second time to confirm. I would like it so that once you blur away from these fields, if they don't match, both will be marked invalid, as in the following scenario:

1. User enters password abc into #newpassword1.
2. User tabs to #newpassword2.
3. User enters password def into #newpassword2.
4. User tabs away.
5. Validation detects a mismatch, and marks both #newpassword1 and #newpassword2 as invalid.

I know that i can mark the target of an event as invalid by using e.target.setCustomValidity(...), but i don't understand JavaScript's event model very well and can't figure out how to mark a different element as invalid based on the event target's own invalidity.

This is the relevant excerpt of (non-working) code that i am trying to use:

if ( $('#newpassword1').val() != $('#newpassword2').val() ) {
    errorMessage = "The new passwords you've entered don't match.";

    $('#newpassword1, #newpassword2').setCustomValidity(errorMessage);
}

This seems like it should work, intuitively, but of course it does not. The error is simply TypeError: $(...).setCustomValidity is not a function.

Please note: I am not asking how to add a red ring or whatever to a field, i want it to actually be invalid (as in, have its validity.valid property return false).

Is it possible to do this?

Thanks!

Answer 1

Try the below code. You are getting that error because jQuery returns an array of selected objects and since setCustomValidity is supported by native input elements and not jquery objects, you are seeing that error.

$('#newpassword1, #newpassword2').each(function() {
    this.setCustomValidity(errorMessage)
});