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

Existe-t-il un moyen d'exiger que les entrées de deux champs de formulaire correspondent à l'aide de HTML5? Ou est-ce que cela doit encore être fait 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 un autre codage qui peut être fait, pour y parvenir?

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

Vous pouvez avec des expressions régulières Modèles d'entrée (vérifier 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>

Une solution simple avec un javascript minimal 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>

JavaScript sera nécessaire, mais la quantité de code peut être réduite au minimum en utilisant un <output>élément intermédiaire et un oninputgestionnaire de formulaire pour effectuer la comparaison (les modèles et la validation pourraient augmenter cette solution, mais ne sont pas affichés ici pour des raisons 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>

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;

Les réponses qui utilisent un modèle et une expression régulière écrivent le mot de passe de l'utilisateur dans les propriétés d'entrée sous forme de texte brut pattern='mypassword'. Cela ne sera visible que si les outils de développement sont ouverts, mais cela ne semble toujours pas une bonne idée.

Un autre problème avec l'utilisation de pattern pour vérifier une correspondance est que vous voudrez probablement utiliser pattern pour vérifier que le mot de passe est de la bonne forme, par exemple des lettres et des chiffres mixtes.

Je pense également que ces méthodes ne fonctionneront pas bien si l'utilisateur bascule entre les entrées.

Voici ma solution qui utilise un peu plus de JavaScript, mais effectue une simple vérification d'égalité lorsque l'une des entrées est mise à jour, puis définit une validité HTML personnalisée. Les deux entrées peuvent toujours être testées pour un modèle tel que le format d'e-mail ou la complexité du mot de passe.

Pour une vraie page, vous changeriez les types d'entrée en «mot de passe».

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

Comme cela a été mentionné dans d'autres réponses, il n'y a pas de moyen purement HTML5 de le faire.

Si vous utilisez déjà JQuery , cela devrait faire ce dont vous avez besoin:

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