HTML5/JS/jQuery: On invalid input, mark a different (arbitrary) element as invalid
html, javascript, jquery, validation
Solution
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)
});
Problem
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: - User enters password `abc` into `#newpassword1`. - User tabs to `#newpassword2`. - User enters password `def` into `#newpassword2`. - User tabs away. - 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!