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

7 minutos de lectura

avatar de usuario de user981178
usuario981178

¿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?

  • El problema que he encontrado con la coincidencia de patrones de expresiones regulares en HTML5 es que cualquier carácter especial coincide: contraseña: Cat$ confirmar contraseña: Cat@ producirá una coincidencia en la confirmación del campo. Aunque tengo mi secuencia de comandos de validación que no permite el envío, esto proporciona una indicador falso para el usuario.

    – trekkabout

    30 de mayo de 2017 a las 14:57

  • La respuesta a esta pregunta es, no, no hay manera de hacer esto con HTML. E incluso si hubiera una forma, siempre se debe realizar la validación del lado del servidor.

    – miken32

    20 de febrero a las 17:12


Avatar de usuario de Faisal
Faisal

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" />

  • ¿Este código experimentaría un problema si nosotros: 1. escribimos ambas contraseñas de la misma manera y luego 2. volvemos al primer campo de contraseña y cambiamos el valor allí?

    – Mladen B.

    25 de marzo de 2018 a las 9:35

  • Sí, y si, por ejemplo, ingresa ‘abc’ en el primer campo y ‘bcd’ en el segundo campo, y luego cambia el ‘abc’ en el primer campo a ‘bcd’, las contraseñas coinciden, pero aún obtendrá el mensaje de entrada inválido.

    – Roel Koops

    18/09/2018 a las 20:46


  • Los problemas mencionados en los comentarios anteriores se pueden abordar: 1) Agregar oninput="check(this)" al primer campo de contraseña, y 2) cambiando input.value en la función de document.getElementById('password_confirm').value. Entonces se vuelve if (document.getElementById('password_confirm').value != document.getElementById('password').value)

    – Cueva Johnson

    20 de diciembre de 2018 a las 2:23


Avatar de usuario de Francisco Costa
francisco costa

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>

  • Si bien esto funciona, sigue siendo una mala respuesta por dos razones: afirma que esta es una solución solo para html, que no lo es, y no explica cómo funciona.

    – wvdz

    18 de octubre de 2014 a las 12:08


  • Eso es probablemente cierto. Sin embargo, si bien es una mala respuesta, es una buena solución. Cuando se ingresa un valor en el primer campo, se verifica el patrón de contraseña definido para esa entrada. Si no se ajusta a su patrón pw, muestra un mensaje. Si coincide con su patrón requerido, cambia el patrón requerido para que el segundo campo pw sea el valor que ingresó el usuario. Si el usuario ingresa algo en el segundo campo, debe ser el valor del primer campo o se muestra el mensaje de error. Bastante agradable. Estoy pensando si esto plantea algún problema de seguridad. no creo que lo haga…

    – Brian Layman

    30 de septiembre de 2015 a las 5:13

  • El truco aquí es “form.password_two.pattern = this.value”, que se romperá con caracteres especiales que tienen un significado especial en expresiones regulares

    – dequis

    14/03/2016 a las 20:10

  • @wvdz nunca dijo que es HTML puro, pero agregó el enlace de compatibilidad del navegador para mayor claridad

    – Francisco Costa

    14/07/2016 a las 17:22

  • @FranciscoToméCosta La pregunta solicita una solución de solo html, por lo tanto, cualquier respuesta implícitamente afirma ser solo de html, a menos que se indique lo contrario.

    – wvdz

    15 de julio de 2016 a las 8:44


avatar de usuario de wvdz
wvdz

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>

  • Gracias por esto; Pude poner la función directamente en el controlador, pero tuve que poner una identificación en la confirmación: <input type="password" name="password" oninput="document.getElementById('confirm').pattern = this.value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')" required><input type="password" id="confirm" name="confirm" pattern="" title="Fields must match" required> No es legible como el suyo, pero evita el script/función por separado.

    –David Marrón

    26 de octubre de 2016 a las 0:42


avatar de usuario de ptrdo
ptrdo

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>

Avatar de usuario de EfisioBova
EfisioBova

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

Avatar de usuario de TylerH
tylerh

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>

Avatar de usuario de Akif Kara
akif kara

      <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?