web-dev-qa-db-fra.com

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 cela doit-il encore être fait avec javascript? Par exemple, si vous avez deux champs de mot de passe et souhaitez vous assurer qu'un utilisateur a saisi les mêmes données dans chaque champ, existe-t-il des attributs ou un autre codage pouvant être effectué pour cela?

formshtml5
83
user981178

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

Vous pouvez utiliser des expressions régulières Motifs d'entrée (vérifiez 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>
26
Francisco Tomé Costa

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

Malheureusement, vous devez également vous échapper de la regex, 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>
13
wvdz

JavaScript sera requis, mais la quantité de code peut être réduite au minimum en utilisant un élément intermédiaire <output> et un gestionnaire de formulaire oninput pour effectuer la comparaison (les modèles et la validation pourraient augmenter cette solution, mais ne sont pas illustré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>
3
ptrdo

Les réponses qui utilisent un modèle et une expression rationnelle é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 être une bonne idée.

Un autre problème lié à l'utilisation de modèle pour rechercher une correspondance est que vous souhaiterez probablement utiliser un modèle pour vérifier que le mot de passe est du bon format, par exemple lettres et chiffres mélangés.

Je pense aussi 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 un simple contrôle 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 de courrier électronique ou la complexité du mot de passe.

Pour une page réelle, vous modifieriez les types de saisie 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>
0
Little Brain

Pas 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;
0
EfisioBova