web-dev-qa-db-fra.com

HTML5: Pourquoi mon attribut "oninvalid" laisse-t-il le modèle échouer?

Ce petit champ de mot de passe HTML5 fonctionne parfaitement SANS l'attribut oninvalid (le motif dit: minimum 6 caractères):

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

Voir le jsFiddle ici .

Mais lorsque j'ajoute un attribut oninvalid qui génère un message d'erreur personnalisé lorsque la saisie de l'utilisateur ne correspond pas au modèle, le champ entier ne devient JAMAIS valide, voir le code ici:

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />      
    <input type="submit"  name="register" value="Register" />
</form>

Voir le jsFiddle ici .

Pouvez-vous repérer l'erreur?

html5input
28
Sliq

Si vous définissez une valeur avec setCustomValidity(), le champ n'est pas valide. Si vous définissez une chaîne de longueur non nulle, le navigateur considère le champ comme non valide. Afin de tenir compte des effets de toute autre validation, vous devez effacer la validité personnalisée:

<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />
80
robertc

Depuis que je suis tombé sur le même problème, voici ma solution: tester et utiliser FF, Chrome, IE 10, Edge (février 2017).

<form>
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');">
<input type="email" required>
<input type="submit">
</form>

Explication:

setCustomValidity(''); supprime la chaîne d'erreur personnalisée qui, sinon, entraînerait toujours un champ non valide lors du processus de validation.

checkValidity(); effectue une validation manuelle - la même chose que ce qui se passe dans la soumission de formulaire. Le résultat est stocké dans validity.valid.

La seconde setCustomValidity(validity.valid ? '' :'please enter 1234'); définit maintenant la chaîne d'erreur en fonction du résultat de la validation. Si le champ est valide, il doit être vide, sinon la chaîne d'erreur personnalisée peut être définie.

11
musicman

J'aime utiliser comme ceci:

<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/>

Et débranché pour toutes les données d'entrée valides

UPD, encore une chose pour un meilleur travail:

    $("input").attr("onblur", "setCustomValidity('')");
    $("input").attr("oninput", "setCustomValidity(' ')");
3
Anonimys

Bien que les réponses à cette question contenaient de bonnes informations, elles ne suffisaient pas à mes besoins. Je dois afficher différents messages en fonction de la règle de validité qui a échoué. Dans les autres exemples, le même message d'échec de validation est utilisé pour tous les échecs de validation.

La propriété "validité" d'un objet de formulaire contient la clé permettant de créer plusieurs messages d'échec de validation.

Vous pouvez consulter toutes les différentes propriétés de propriété "validité" sur ce site Web.

https://www.w3schools.com/js/js_validation_api.asp

Cet exemple montre comment afficher deux messages de validation différents. Si vous ne commentez pas la ligne console.log () ci-dessous, vous pouvez voir la propriété de validité changer au fur et à mesure que vous tapez dans un champ.

<label for="user_password_new">New Password:</label>
<input type="password" name="user_password_new" id="user_password_new"
    pattern=".{6,}"
    value=""
    required
    oninput="
        setCustomValidity('');
        checkValidity();
        // console.log(validity);
        if (validity.patternMismatch) {
            setCustomValidity('Please enter at least six characters.');
        }
        else if (validity.valueMissing) {
            setCustomValidity('This field is required.');
        }
        else if (validity.valid) {
            setCustomValidity('');
        }
        // allow default validation message to appear for other validation failures
    "
>

REMARQUE: certaines vérifications de validité sont spécifiques au "type". Par exemple, les attributs "rangeOverflow", "rangeUnderflow" et "stepMismatch" sont définis si le type les utilise; type = "nombre".

0
Scott Jibben

Vous pouvez utiliser title tant que le fait de 'You must use this format:' avant votre message ne vous dérange pas Si vous voulez un message personnalisé complet, la setCustomValidity() a fonctionné pour moi.

0
usr4896260