Validation pattern oninvalid

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
frpandore
Messages : 3
Enregistré le : 16 oct. 2019, 18:23

Validation pattern oninvalid

Message par frpandore » 16 oct. 2019, 21:18

Bonjour à tous,

Je fais une appli en php pour me faciliter la vie au boulot. J'ai un souci de validation...
Je voudrais n'afficher un bouton que lorsque l'input est valide or, seul l'évènement oninvalid existe... pas ONVALID.

Pour votre information, afin que vous évitiez de me dire "pourquoi veux-tu cacher le bouton de validation de ton formulaire" et me répondre à côté."
J'ai des noms de fichiers qui ne respectent pas la nomenclature établie (expressions rationnelles) et veux que l'utilisateur les corrigent.
Seulement, lorsque j'affiche les x noms de fichiers dans des input les uns au-dessous des autres, c'est illisible.
De plus, j'ai mis un lien pour ouvrir le fichier correspondant et lorsqu'on le consulte dans une autre fenêtre, on perd le fil...

Ma solution est d'afficher les noms de fichiers à corriger l'un après l'autre.
Donc, on corrige le premier nom de fichier, le bouton de validation apparaît ; lorsqu'on clique dessus, le premier fichier disparaît, laissant la place au suivant.
Quand tout est corrigé, on valide le formulaire et je renomme les fichiers avec PHP pour passer à la suite.
Si vous aviez une solution où une piste à me fournir soit en JavaScript soit en HTML5?

Je sais faire la suite, mais l'absence de onvalid me perturbe... Peux-t-on l'annuler !oninvalid ?

<form>
<div id='f1' style='display:block'>
<input type='text' id='inp_1' value='leNomDuFichierAModifier' pattern='nomenclature' required ONVALID='affiche but_1'>
<button id='but_1' style='display:none;' onclik='masque f1 et affiche f2'>Valider</button>
</div>
<div id='f2 style='display:none''>
<input type='text' id='inp_2' value='leNomDuFichierAModifier' pattern='nomenclature' required ONVALID='affiche but_2'>
<button id='but_2' style='display:none;' onclik='masque f2 et affiche f3'>Valider</button>
</div>
...
</form>

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Validation pattern oninvalid

Message par webmaster » 17 oct. 2019, 11:39

Bonjour

Interessant comme besoin. Je n'y avais pas pensé.

D'après quelques recherches, il semble possible de vérifier la validité (sur un onchange par exemple) avec la propriété validity

document.getElementById('inp_1').validity.valid;
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

frpandore
Messages : 3
Enregistré le : 16 oct. 2019, 18:23

Re: Validation pattern oninvalid

Message par frpandore » 17 oct. 2019, 12:16

Merci à toi. Je regarde ce soir.
Je pense que j'ai bloqué bêtement à cause de ce oninvalid.
De ce que j'ai compris, il n'est intéressante qu'en HTML5 pour la gestion des styles.
Je vais faire du tout javascript et ça ira bien.
Bonne journée.

frpandore
Messages : 3
Enregistré le : 16 oct. 2019, 18:23

Re: Validation pattern oninvalid

Message par frpandore » 19 oct. 2019, 06:38

Bonjour,

Ok pour moi.
Deux petites fonctions de quelques lignes en utilisant onchange et validity.valid.
Le tout marche nickel.
En testant, je me suis dis qu'il était peut-être plus judicieux de 'poster' les fichiers l'un après l'autre plutôt que d'envoyer le formulaire quand tout est corrigé...
En gros, j'aurais pu tout gérer en PHP et c'est sans doute ce que je vais faire ;)
Faire et défaire, c'est toujours travailler !

Merci encore.

Répondre