¿Puede requerir dos campos de formulario para que coincidan con HTML5?

¿Hay alguna manera de requerir que las entradas en dos campos de formulario coincidan usando HTML5? ¿O todavía hay que hacer esto con javascript? Por ejemplo, si tiene dos campos de contraseña y desea asegurarse de que un usuario haya ingresado los mismos datos en cada campo, ¿existen algunos atributos u otra codificación que se pueda hacer para lograrlo?

No exactamente con la validación de HTML5, pero un poco de JavaScript puede resolver el problema, siga el ejemplo a continuación:

<p>Password:</p>
<input name="password" required="required" type="password" id="password" />
<p>Confirm Password:</p>
<input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('password').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
<br /><br />
<input type="submit" />

Puede hacerlo con patrones de entrada de expresiones regulares (compruebe la compatibilidad del navegador )

<input id="password" name="password" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>

<input id="password_two" name="password_two" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>

Una solución simple con un mínimo de javascript es utilizar el patrón de atributo html (compatible con la mayoría de los navegadores modernos). Esto funciona estableciendo el patrón del segundo campo en el valor del primer campo.

Desafortunadamente, también necesita escapar de la expresión regular, para la cual no existe una función estándar.

<form>
    <input type="text" oninput="form.confirm.pattern = escapeRegExp(this.value)">
    <input name="confirm" pattern="" title="Fields must match" required>
</form>
<script>
    function escapeRegExp(str) {
      return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }
</script>

Se requerirá JavaScript, pero la cantidad de código se puede mantener al mínimo mediante el uso de un <output>elemento intermediario y un oninputcontrolador de formulario para realizar la comparación (los patrones y la validación podrían aumentar esta solución, pero no se muestran aquí por simplicidad):

<form oninput="result.value=!!p2.value&&(p1.value==p2.value)?'Match!':'Nope!'">
  <input type="password" name="p1" value="" required />
  <input type="password" name="p2" value="" required />
  <output name="result"></output>
</form>

No solo HTML5 sino un poco de JavaScript
Haga clic [aquí] https://codepen.io/diegoleme/pen/surIK

HTML

    <form class="pure-form">
    <fieldset>
        <legend>Confirm password with HTML5</legend>

        <input type="password" placeholder="Password" id="password" required>
        <input type="password" placeholder="Confirm Password" id="confirm_password" required>

        <button type="submit" class="pure-button pure-button-primary">Confirm</button>
    </fieldset>
</form>

JAVASCRIPT

var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

Las respuestas que usan patrón y una expresión regular escriben la contraseña del usuario en las propiedades de entrada como texto sin formato pattern='mypassword'. Esto solo será visible si las herramientas de desarrollo están abiertas, pero aún así no parece una buena idea.

Otro problema con el uso de patrón para verificar una coincidencia es que probablemente desee usar patrón para verificar que la contraseña tiene la forma correcta, por ejemplo, letras y números mezclados.

También creo que estos métodos no funcionarán bien si el usuario cambia entre entradas.

Aquí está mi solución que usa un poco más de JavaScript pero realiza una simple verificación de igualdad cuando se actualiza cualquiera de las entradas y luego establece una validez HTML personalizada. Ambas entradas aún se pueden probar para un patrón como el formato de correo electrónico o la complejidad de la contraseña.

Para una página real, cambiaría los tipos de entrada a 'contraseña'.

<form>
    <input type="text" id="password1" oninput="setPasswordConfirmValidity();">
    <input type="text" id="password2" oninput="setPasswordConfirmValidity();">
</form>
<script>
    function setPasswordConfirmValidity(str) {
        const password1 = document.getElementById('password1');
        const password2 = document.getElementById('password2');

        if (password1.value === password2.value) {
             password2.setCustomValidity('');
        } else {
            password2.setCustomValidity('Passwords must match');
        }
        console.log('password2 customError ', document.getElementById('password2').validity.customError);
        console.log('password2 validationMessage ', document.getElementById('password2').validationMessage);
    }
</script>

Como se ha mencionado en otras respuestas, no existe una forma puramente HTML5 de hacer esto.

Si ya está utilizando JQuery , esto debería hacer lo que necesita:

$(document).ready(function() {
  $('#ourForm').submit(function(e){
      var form = this;
      e.preventDefault();
      // Check Passwords are the same
      if( $('#pass1').val()==$('#pass2').val() ) {
          // Submit Form
          alert('Passwords Match, submitting form');
          form.submit();
      } else {
          // Complain bitterly
          alert('Password Mismatch');
          return false;
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ourForm">
    <input type="password" name="password" id="pass1" placeholder="Password" required>
    <input type="password" name="password" id="pass2" placeholder="Repeat Password" required>
    <input type="submit" value="Go">
</form>