IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Validation de formulaire en Javascript ou pas ?


Sujet :

JavaScript

  1. #1
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut Validation de formulaire en Javascript ou pas ?
    Bonjour � tous,

    je m'heurte � un probl�me de conception.

    A l'heure actuelle, l'utilisateur peut encore d�sactiver javascript.
    Est-il bon alors de coder nos validations de formulaire en javascript?

    y a-t-il une solution � cette d�sactivation possible?

    Qu'en est-il alors des librairies comme Bootstrap qui utilise Jquery par exemple?

    Merci

  2. #2
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    M�me si JavaScript est activ�, le code client est visible et modifiable par le client. Donc il faut toujours valider les entr�es c�t� serveur, comme une forteresse � prot�ger. R�gle num�ro 1 du back-end : Never trust client.

    En premier lieu il faut donc coder la validation c�t� serveur et la tester avec des requ�tes "non orthodoxes". Il y a des logiciels sp�cialis�s qui analysent les sites web et spamment le serveur en testant des failles courantes dans les champs de formulaires.

    Une fois que tu es certain que ton serveur est blind�, alors on peut envisager d'utiliser en compl�ment la validation HTML5 / JavaScript . La validation c�t� client est int�ressante pour 3 raisons :
    - accompagner l'utilisateur dans la saisie
    - ajouter de la s�mantique au formulaire (� condition d'utiliser les standards HTML5)
    - ne pas requ�ter inutilement le serveur quand on sait que le formulaire est incorrect

  3. #3
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut
    Merci. je partais dans ce sens.

    Mais qu'en est-il, par exemple, des menus d�roulants, animations, etc...
    Ils existe �norm�ment de sites qui utilisent le javascript, mais quelles parades utilisent-ils pour palier � la d�sactivation du javascript?
    Leur site ne fonctionne pas et ils ne s'en tracassent pas?

    Y a-t-il moyen de savoir si le javascript a �t� d�sactiv� du c�t� client?

    Merci

  4. #4
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    il y a en effet moyen de tester si js est activ� ou non et pr�voir cela pour le comportement du formulaire.
    Tu peux par exemple afficher un message sur la page disant qu'elle est pr�vue pour fonctionner avec js.
    et coller un script au chargement qui efface ce message
    => js activ� le message n'apparait pas
    => js d�sactiv� le message apparait

    Mais c'est tout de m�me assez rare

    Tu peux aussi mettre un form sans js et le remplacer au chargement par un form avec js ...
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  5. #5
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Si bien s�r il y a plusieurs apporoches pour palier � l'absence de JavaScript :

    - JavaScript "isomorphique" ou "universel", c'est-�-dire utiliser la m�me base de code c�t� client et c�t� serveur pour pouvoir g�n�rer les vues avec ou sans le support JS client
    - am�lioration progressive (Progressive enhancement) ; faire en sorte que sans JS le site soit toujours fonctionnel bien que d�grad�
    - redirection ; rediriger vers une autre page si JS est d�sactiv� avec une balise <meta>:
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    <noscript>  <meta http-equiv="refresh" content="0;url=noscript.html">
    </noscript>

  6. #6
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut
    Je comprend bien tout ce que vous dites d'un point de vue validation de formulaire.

    Je vois moins bien, par exemple, d'un point de vue animation.

    Je m'explique.

    Je me suis lanc� dans Bootstrap qui utilise le javascript, plus pr�cis�ment JQuery pour de petites animations comme pour les dropdown.

    Nom : dropdown.PNG
Affichages : 178
Taille : 8,0 Ko

    Lorsque le javascript est d�sactiv� la liste ne s'affiche pas.

    Il faudrait donc, lorsque le javascript est d�sactiv�, que la fl�che vers le bas ne soit pas affich�d et que le lien dirige sur une page avec les liens qui auraient d� s'afficher dans la dropdown.

    Ce que je n'arrive pas � comprendre, c'est que le test ne se fait que dans un sens.

    si pas de javascript possible alors ....

    Mais pas de test inverse...

    Ou alors il faut tout g�n�rer par javascript ce qui doit �tre utilis� quand javascript est actif?

    Merci

  7. #7
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    D�j� ce genre de menu dropdown peut �tre fait en pur CSS sans recours � JS. Ensuite oui, si JS est requis, il faut veiller � ce que la page soit consultable correctement s'il est d�sactiv�, en choisissant une des 3 options pr�c�demment cit�es.

    Je ne comprends pas ce que tu veux dire par "test inverse". Tester le non support de JS et tester le support de JS... c'est le m�me test

  8. #8
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut
    La balise <noscript></noscript> permet de d�terminer du code pur html � interpr�ter si le javascript est d�sactiv�.

    mais est-ce que la balise <script></script> permet de d�terminer du code pur html?

  9. #9
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Ben non, si on veut ajouter du contenu HTML si JavaScript est activ� on le fait... en JavaScript

  10. #10
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut
    C'�tait ma question :-)
    Un grand merci :-)

  11. #11
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut
    j'ai encore besoin d'une petite pr�cision.

    Que me conseillez-vous comme m�thode pour la partie qui doit appara�tre qu'en javascript.

    Cr�er mon bloc html en display:none et lors du chargement en javascript modifier l'attribut display?
    Ou tout construire en javascript?

    car mon bloc est assez cons�quent.

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <li id="menu-administration"><a href="#">Administration</a></li>
    <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>
         <ul class="dropdown-menu">
    	<li><a href="calendrier">Calendrier</a></li>
    	<li><a href="resultatsweekend">Résultats du Weekend</a></li>
    	<li><a href="classements">Classements</a></li>
    	<li><a href="resultatsperso">Résultats personnels</a></li>
    	<li><a href="effectif">Effectif du weekend</a></li>
         </ul>
    </li>
    Merci

  12. #12
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Ce HTML a l'air lisible sans JavaScript, �a montrera la liste avec un titre. J'imagine qu'il est cach� en CSS pour le faire appara�tre en JS, sans doute avec la classe dropdown. Donc tout ce que tu as � faire est ajouter cette classe en JavaScript en m�me temps que le dropdown est initialis�.

  13. #13
    Expert confirm�

    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de D�me (Auvergne)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - Multim�dia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par d�faut
    Basiquement dans un lien de ce type :
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>
    tu peux indiquer une url qui sera suivie uniquement si javascript est d�sactiv� (s'il est activ� tu fais classiquement un "return fase" sur le lien). Tu peux donc passer une variable dans ce lien pour faire afficher le bloc de menu sur une condition c�t� serveur. Par exemple :
    <a href="ma_page.php?menu=championnat" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>

  14. #14
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Oui enfin recharger toute une page pour juste d�plier un menu �a me para�t disproportionn�. Surtout si on peut le faire simplement sans JavaScript : http://codepen.io/anon/pen/yNpeRN

  15. #15
    Expert confirm�

    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de D�me (Auvergne)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - Multim�dia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par d�faut
    Oui enfin c'�tait sur le principe d'avoir un comportement diff�rent sur un lien en fonction de javascript activ� ou non.
    Apr�s suivant les cas si on peut faire l'�quivalent en css bien s�r c'est mieux (mais v�rifier la compatibilit� du code - notamment si on emploi css3 - avec les anciens navigateurs).

  16. #16
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut
    En faisant ceci, est-ce que justement il ne risque pas d'afficher par d�faut la liste?
    Si c'est le cas, �a ne risque pas d'�tre tr�s pr�sentable.

    Justement est-ce que ce ne serait pas mieux par d�faut de mettre mon lien pointant vers ma page administration en laissant tel quel la dropdown en display none, et dans le cas o� le javascript est activ� de modifier le href et pointer vers #?

  17. #17
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Le contenu passe toujours avant la pr�sentation. Le principe d'am�lioration progressive implique d'avoir un contenu toujours accessible dans le pire des cas. Donc mettre un display:none par d�faut n'est pas une bonne id�e. Par exemple, les screen readers ne lisent pas les �l�ments en display:none. Un malvoyant pourrait ainsi ne pas savoir que ton menu a une sous-liste de liens.

  18. #18
    Expert confirm�

    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de D�me (Auvergne)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - Multim�dia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par d�faut
    Effectivement si javascript est d�sactiv� la pr�sentation passe au second plan. Globalement, � part quelques paranos qui savent � quoi ils s'attendent (un site d�grad�), il n'y a que les robots et les non-voyants pour qui javascript sera d�sactiv�, et l� aussi la pr�sentation visuelle passe au second plan. L'important est donc que toutes les pages (au minimum les plus importantes, mais toutes si tu veux un r�f�rencement et une accessibilit� maximum) de ton site soient consultables avec js d�sactiv�.

    Pour info cela fait d�j� quelques temps que Firefox (pour donner l'exemple d'un navigateur qui �tait facilement configurable � tous les niveaux) ne propose plus la d�sactivation de javascript dans ses options standard, il faut maintenant installer un module sp�cifique (ex : "NoScript"). Pour dire que pour un usage courant, javascript ne sera qu'exceptionnellement d�sactiv�. Donc bien entendu il faut pr�server la validation des formulaires c�t� serveur dans tous les cas, mais niveau pr�sentation tu peux te permettre pas mal de largesses avec js d�sactiv�.

  19. #19
    Membre confirm�
    Profil pro
    Inscrit en
    F�vrier 2009
    Messages
    171
    D�tails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : F�vrier 2009
    Messages : 171
    Par d�faut
    j'ai test� en mettant le lien vers la page alternative comme ceci :

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    <a href="championnat" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Championnat<span class="caret"></span></a>
    Et �a r�agit assez bien en fonction que le javascript est activ� ou non.

    Si javascript est activ�, le dropdown s'affiche bien et dans le cas contraire, on passe bien sur la page "alternative" qui liste les liens qui auraient d� �tre affich� dans la dropdown.

    Je viens seulement de me lancer dans Bootstrap, mais concernant l'accessibilit� aux screen readers, Bootstrap a pr�vu une classe .sr-only qui permet justement de mettre un block en display : hidden au lieu de le mettre par d�faut en display:non.

    Donc finalement Bootstrap a pr�vu tout ce qu'il faut pour tout respecter.

    Tiens, comment tester l'accessibilit� d'un site pour les screen readers?

  20. #20
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    display:hidden �a n'existe pas. Tu dois parler de visibility. Attention avec visibility:hidden l'�l�ment est cach� mais occupe toujours l'espace qu'il est cens� prendre dans la page.

    Je continue � croire que recharger toute la page pour d�plier un menu est compl�tement disproportionn�, et que tu ferais mieux d'afficher directement la sous-liste aux clients avec JS d�sactiv�, comme l'a expliqu� ABCIWEB.

    Pour tester l'accessibilit� d'un site il y a des extensions et des services en ligne. Une petite recherche Google et hop:
    https://www.google.fr/search?q=test+...+accessibility
    http://www.w3.org/WAI/ER/tools/

+ R�pondre � la discussion
Cette discussion est r�solue.
Page 1 sur 2 12 Derni�reDerni�re

Discussions similaires

  1. Validation de formulaire et Javascript
    Par Kuky18 dans le forum Langage
    R�ponses: 4
    Dernier message: 07/05/2012, 23h26
  2. Validation de formulaire en javascript et envoi en PHP
    Par Knutt dans le forum G�n�ral JavaScript
    R�ponses: 7
    Dernier message: 20/02/2011, 22h09
  3. R�ponses: 4
    Dernier message: 20/02/2011, 12h32
  4. valider un formulaire avec javascript
    Par x2thez dans le forum jQuery
    R�ponses: 9
    Dernier message: 29/06/2009, 20h51
  5. Validation de formulaire en javascript
    Par crocodingo dans le forum G�n�ral JavaScript
    R�ponses: 1
    Dernier message: 02/05/2007, 17h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo