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

Question 1

¿Hay alguna manera de requerir que las entradas en dos campos de formulario coincidan usando HTML? ¿O esto todavía tiene que hacerse 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 realizar para lograrlo?

Question 2

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

function check() {
    var input = document.getElementById('password_confirm');
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('Password Must be Matching.');
    } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
    }
}

<p>
  <label for="password">Password:</label>
  <input name="password" required="required" type="password" id="password" oninput="check()"/>
</p>

<p>
  <label for="password_confirm">Confirm Password:</label>
  <input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check()"/>
</p>

<input type="submit" />

Question 3

Puedes con expresiones regulares Patrones de entrada (controlar 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>

Question 4

Una solución simple con javascript mínimo es usar el patrón de atributo html (compatible con mayoría 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>

Question 5

Se requerirá JavaScript, pero la cantidad de código puede reducirse al mínimo mediante el uso de un intermediario <output> elemento y un oninput controlador de formulario para realizar la comparación (los patrones y la validación podrían mejorar 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>

Question 6

No solo HTML sino un poco de JavaScript

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(){
    confirm_password.setCustomValidity( password.value != 
    confirm_password.value ? "Passwords Don't Match" : '');
}

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

Demostración de CodePen

Question 7

Como se ha mencionado en otras respuestas, no hay una forma HTML pura de hacer esto.

Si ya está usando JQueryentonces esto debería hacer lo que necesitas:

$(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>

Question 8

      <div className="form-group">
        <label htmlFor="password">Password</label>
        <input
          value={password}
          onChange={(e) => { setPassword(e.target.value) }}
          type="password" id='password' name="password" required minLength={3} maxLength={255} />
      </div>
      <div className="form-group">
        <label htmlFor="confirmPassword">Confirm Password</label>
        <input
          title="Passwords should be match"
          pattern={`${password}`}
          value={confirmPassword}
          onChange={(e) => { setConfirmPassword(e.target.value) }}
          type="password" id='confirmPassword' name="confirmPassword" required minLength={3} maxLength={255} />
      </div>

¿Ha sido útil esta solución?