password_confirm.html

---
layout: example
---
<form>
  <p>
    <label>Password:<br>
      <input type="password" name="password" id="password" required>
    </label>
  </p>
  <p>
    <label>Confirm password:<br>
      <input type="password" name="password_confirm" id="password_confirm">
    </label>
  </p>
  <p><button>go</button></p>
</form>

<script>
/* register a custom validator for the confirmation field */
hyperform.addValidator(
  document.getElementById('password_confirm'),
  function(element) {
    var valid = element.value === document.getElementById('password').value;
    element.setCustomValidity(
      valid?
        '' :
        'The password does not match the control field.'
    );
    return valid;
  }
);

/* whenever the password field changes, revalidate the confirmation field,
 * too */
document.getElementById('password').addEventListener('keyup', function() {
  document.getElementById('password_confirm').reportValidity();
});

hyperform(window);
</script>