Pouvez-vous exiger que deux champs de formulaire correspondent à HTML5 ?

Question

Existe-t-il un moyen d'exiger que les entrées de deux champs de formulaire correspondent à l'aide de HTML5 ? Ou faut-il encore le faire avec javascript ? Par exemple, si vous avez deux champs de mot de passe et que vous voulez vous assurer qu'un utilisateur a entré les mêmes données dans chaque champ, y a-t-il des attributs ou d'autres codages qui peuvent être effectués pour y parvenir ?

Answer 1

Pas exactement avec la validation HTML5 mais un peu de JavaScript peut résoudre le problème, suivez l'exemple ci-dessous :

 <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

Vous pouvez avec des expressions régulières Input Patterns (vérifiez la compatibilité du navigateur )

 <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

Une solution simple avec un minimum de javascript consiste à utiliser le modèle d'attribut html (pris en charge par la plupart des navigateurs modernes). Cela fonctionne en définissant le modèle du deuxième champ sur la valeur du premier champ.

Malheureusement, vous devez également échapper à l'expression régulière, pour laquelle aucune fonction standard n'existe.

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

Answer 4

JavaScript sera nécessaire, mais la quantité de code peut être réduite au minimum en utilisant un <output> et un oninput pour effectuer la comparaison (les modèles et la validation pourraient augmenter cela solution, mais ne sont pas montrés ici par souci de simplicité):

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

Non seulement HTML5 mais un peu de JavaScript Cliquez [ici] 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;