title: HTML5/JS/jQuery: On invalid input, mark a different (arbitrary) element as invalid
body: <p>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, <em>both</em> will be marked invalid, as in the following scenario:</p>
  
  <ol>
  <li>User enters password <code>abc</code> into <code>#newpassword1</code>.</li>
  <li>User tabs to <code>#newpassword2</code>.</li>
  <li>User enters password <code>def</code> into <code>#newpassword2</code>.</li>
  <li>User tabs away.</li>
  <li>Validation detects a mismatch, and marks both <code>#newpassword1</code> <em>and</em> <code>#newpassword2</code> as invalid.</li>
  </ol>
  
  <p>I know that i can mark the target of an event as invalid by using <code>e.target.setCustomValidity(...)</code>, but i don't understand JavaScript's event model very well and can't figure out how to mark a <em>different</em> element as invalid based on the event target's own invalidity.</p>
  
  <p>This is the relevant excerpt of (non-working) code that i am trying to use:</p>
  
  <pre><code>if ( $('#newpassword1').val() != $('#newpassword2').val() ) {
      errorMessage = "The new passwords you've entered don't match.";
  
      $('#newpassword1, #newpassword2').setCustomValidity(errorMessage);
  }
  </code></pre>
  
  <p>This seems like it should work, intuitively, but of course it does not. The error is simply <code>TypeError: $(...).setCustomValidity is not a function</code>.</p>
  
  <p>Please note: I am not asking how to add a red ring or whatever to a field, i want it to actually <em>be</em> invalid (as in, have its <code>validity.valid</code> property return <code>false</code>).</p>
  
  <p>Is it possible to do this?</p>
  
  <p>Thanks!</p>