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!