11548 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour,

Je sais qu'il existe des floppées de scripts pour valider un formulaire, mais j'aimerais savoir selon l'expérience de chacun quel est selon vous la meilleure méthode / meilleur script : je suis en effet à la recherche de méthode.

- Une validation simple (erreur champ vide, erreur nombres de caractères, erreur lettre/chiffres, erreur email...)
- Une intégration du jscript conforme et accessible dans le xhtml...

Merci de vos réponses
Samuel Berg a écrit :
Bonjour,

Je sais qu'il existe des floppées de scripts pour valider un formulaire, mais j'aimerais savoir selon l'expérience de chacun quel est selon vous la meilleure méthode / meilleur script : je suis en effet à la recherche de méthode.

- Une validation simple (erreur champ vide, erreur nombres de caractères, erreur lettre/chiffres, erreur email...)
- Une intégration du jscript conforme et accessible dans le xhtml...

Merci de vos réponses


Je suis en train de m'en occuper tiens !
C'est le tout début, pas eu le temps de m'y mettre à fond :
http://cv.olivier-patry.net/form.html

Je te tiens au courant quand c'est prêt Smiley cligne

N.B. Ne pas oublier de faire les mêmes vérifications côté serveur en complément et en replis au cas où JS est inactif.
Modifié par Olivier (25 Jan 2006 - 12:10)
Olivier a écrit :


Je suis en train de m'en occuper tiens !
C'est le tout début, pas eu le temps de m'y mettre à fond :
http://cv.olivier-patry.net/form.html

Je te tiens au courant quand c'est prêt Smiley cligne

N.B. Ne pas oublier de faire les mêmes vérifications côté serveur en complément et en replis au cas où JS est inactif.


Je suis impressionné par l'intelligence de votre code concernant le onfocus. En effet il a l'air parfaitement accessible (pas de code jscript dans le xhtml) et son côté pratique (moi je n'ai qu'une misérable sélection du value) avec le changement de couleur est superbe. Par contre peut-être est vous allé un peu trop loin car je ne vois même pas où est l'astuce, c'est un tour de magie ?

PS : tout flatteur vie au dépend de celui qui l'écoute Smiley langue
Il y a des CSS (:focus c'est pas le onfocus du JS), du JS pour vérifier les champs avant validation. L'astuce comme tu dis, se base sur l'utilisation d'un nom de class (ici required) dans les champs qui sont obligatoires. Le script vérifie ces champs (remplis ou non) et pour l'instant fait des alert sur le nombre de champs mal remplis. A terme ça sera une petite note et une mise en forme sur les dit champs pour être plus ergonomique.

C'est vraiment une préversion là, il reste pas mal de boulot, notament au niveau de la vérification des adresse email, des champs type URLs, des checkbox, radio button, select, textarea etc.
Modifié par Olivier (25 Jan 2006 - 13:47)
clb56 a écrit :


Pas la peine c'est déjà bookmarké Smiley lol Smiley love

PS : idem que samuel


L'URL risque de changer !!

Je ferais un gros topo sur les mécanismes mis en place et le principe, un tuto et un article de fond en complément.
Mais avant, je dois terminer !
p.s.
a écrit :
il a l'air parfaitement accessible (pas de code jscript dans le xhtml)


L'accessibilité et l'extraction du code JavaScript du code HTML n'est équivalente Smiley cligne

Certe, c'est plus facile, pour contrôler le mécanisme sans JS, c'est plus propre, c'est plus facilement maintenable, c'est plus centralisé, mais les mêmes choses directement dans le code HTML seraient aussi accessible JS inactif Smiley cligne

Mais c'est quand même 1000 fois mieux d'extraire tout Smiley lol
Modifié par Olivier (25 Jan 2006 - 13:46)
Ha ménon je me rétracte, j'ai parlé trop vite, le value n'est pas rempli Smiley nono ce qui donne un formulaire non accessible.

Par contre si vous connaissez la solution pour faire un onFocus qui ne soit pas dans le code je vous en serait très reconnaissant.

J'apprécierai aussi le script de validation Dom !
Modifié par Samuel Berg (25 Jan 2006 - 14:05)
Samuel Berg a écrit :
Ha ménon je me rétracte, j'ai parlé trop vite, le value n'est pas rempli Smiley nono ce qui donne un formulaire non accessible.

Par contre si vous connaissez la solution pour faire un onFocus qui ne soit pas dans le code je vous en serait très reconnaissant.

J'apprécierai aussi le script de validation Dom !


Quel rapport avec value="..." ?? et quel rapport avec l'accessibilité ?
Peux-tu expliquer ce que tu veux dire, parceque là je ne comprend pas Smiley ohwell

Pour le onfocus :

monElt.onfocus = function()
{
   // mes instructions
};
Olivier a écrit :


Quel rapport avec value="..." ?? et quel rapport avec l'accessibilité ?
Peux-tu expliquer ce que tu veux dire, parceque là je ne comprend pas Smiley ohwell

Pour le onfocus :

monElt.onfocus = function()
{
   // mes instructions
};


J'ai vu dans un de mes testeurs d'accessibilité, je ne sais plus lequel (bobby, accessweb ou occawa) qu'il fallait impérativement mettre un value dans les champs... et qui dit value dit obligation de faire une suppression de texte ou au mieux une sélection automatique lors de l'arrivée dans le champs, le onfocus est plus simple onfocus="this.select();" et plus propre que de mettre un code javascript qui ne passe pas dans les validateurs d'accessibilité...

Par contre j'aurais besoin de façon urgente d'une validation de formulaire et ce n'est pas une blague, j'ai de fortes pressions professionnelles pour la mise en ligne de mon site.

Si vous considérez votre validation au point, pourriez-vous me la faire partager ?

Cordialement, maître renard...
Modifié par Samuel Berg (26 Jan 2006 - 17:53)
Eh bien je trouve que c'est une vaste connerie que d'obliger l'attribut value dans les formulaires.

Sur l'exemple de page que tu donnes (sur un autre topic) ça n'apporte strictement rien du tout, c'est double emploi avec le label et implique de mettre en oeuvre les suppressions de texte au focus ce qui complexifie pour rien la tâche. Et sans JS, le formulaire sera bien plus désagréable à utiliser avec les value que sans.

Je veux bien que tu retrouves tes sources parceque je trouve que c'est n'importe quoi. Je te déconseille d'utiliser les values (comme ça en tout cas).

Pour mon script, tu peux toujours l'utiliser tel quel, mais il est très loin d'être au point et là je suis en exam donc pas le temps de le terminer. Courant de semaine prochaine à priori.

<edit>Par ailleurs sur le lien que tu donnes sur l'autre topic, tes radio button ne sont pas labelisé, et ça c'est un manque d'accessibilité ! Il est plus difficile de cliquer sur un rond de radio button que sur le texte l'accompagnant pour les personnes ayant des difficultés motrices ou même pas très à l'aise avec la souris tout simplement.</edit>
Modifié par Olivier (26 Jan 2006 - 18:03)
Olivier a écrit :

<edit>Par ailleurs sur le lien que tu donnes sur l'autre topic, tes radio button ne sont pas labelisé, et ça c'est un manque d'accessibilité ! Il est plus difficile de cliquer sur un rond de radio button que sur le texte l'accompagnant pour les personnes ayant des difficultés motrices ou même pas très à l'aise avec la souris tout simplement.</edit>


Bah j'avoue que j'ai un problème avec mes ratios. J'arrive à les produire, mais pas à les labeliser ! Smiley langue
Bonjour à tous,
@ Olivier > une question au passage, ne serait il pas plus sûr de réaliser la validation d'un formulaire en php plutôt qu'en javascript qui peut être désactivé? Bon ça va entraîner des aller retours avec le serveur puisque le php n'est pas exécuté localement mais pour un formulaire simple n'est ce pas acceptable?
J'ai vu des cas où les 2 sont combinés genre prévalidation js et post validation php...mais je trouve ça un peu batard !
Pour avis sur la question...et bons exams Smiley smile
Arrhh, j'ai pas écrit ça plus haut ?? (il me semble bien que si !!)

Cette prévérification sert justement à éviter les aller retours côté serveur en cas d'erreur pour améliorer le remplissage.

Bien evidement les même vérifications doivent être faites côté serveur (ce que j'ai précisé Smiley cligne ).

Je ne trouve pas ça batard Smiley ohwell dans tous les cas, elles devront être faites côté serveur, mon truc sera suffisament facile à adapter pour que ça ne demande pas trop de temps à mettre en place (c'est moi qui aurait fait tout le boulot ^^)
Samuel Berg a écrit :


Bah j'avoue que j'ai un problème avec mes ratios. J'arrive à les produire, mais pas à les labeliser ! Smiley langue



<input name="..." id="monradio1" type="radio" /> <label for="monradio1">Mon label</label>

Smiley ohwell
Modifié par Olivier (27 Jan 2006 - 17:15)
Ok Olivier, sorry je n'avais pas vu ta phrase sur le sujet...ben si c'est la meilleure solution alors j'essaierai ça la prochaine fois ! Smiley smile
zanzibar a écrit :
Ok Olivier, sorry je n'avais pas vu ta phrase sur le sujet...ben si c'est la meilleure solution alors j'essaierai ça la prochaine fois ! Smiley smile


La meilleure, j'en sais rien !
Mais c'est assez agréable je trouve pour l'utilisateur d'éviter le reload de la page pour retomber sur une erreur alors qu'il peut s'en abstenir. Idem pour le serveur, des accès qui peuvent être évités, c'est pas plus mal.
Oh mais ça n'a pas beaucoup avancé tout ça !

On ne serait pas en train nous couver une petite grippe ?
Modifié par Samuel Berg (30 Jan 2006 - 12:55)
Pages :