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

insertar calendario en formulario html

Question

¿Hay alguna forma de que las entradas en dos campos de formulario coincidan con HTML5? ¿O esto todavía tiene que hacerse con javascript? Por ejemplo, si tiene dos campos de contraseña y quiere asegurarse de que un usuario haya ingresado los mismos datos en cada campo, ¿hay algún atributo u otra codificación que se pueda hacer para lograr esto?

Answer 1

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

Answer 2

Puede con expresiones regulares Patrones de entrada (verifique 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>

Answer 3

Se requerirá JavaScript, pero la cantidad de código se puede mantener al mínimo utilizando un elemento <output> intermediario y un oninput formulario oninput para realizar la comparación (los patrones y la validación podrían aumentar esta solución, pero no se muestran aquí por el bien de 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>

Answer 4

Una solución simple con javascript mínimo es usar el patrón de atributo html (compatible con la mayoría de los navegadores modernos). Esto funciona al establecer el patrón del segundo campo al 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>