Ajouter SES attributs en xhtml

(reprise du message précédent)

En fait, il suffit de mettre un espace avant le crochet fermant ou après le crochet ouvrant. Faut y penser, j'oublie aussi de temps en temps...

Une autre question pendant que j'y suis : il n'y a pas de limite à la longueur des noms dans l'attribut class ?

Je m'explique : j'ai ça :
class="jsformcheckCharLength-6-18-Votre-mot-de-passe-doit-contenir-entre-6-et-18-caractères"

Merci.

QuentinC a écrit :

Je m'explique : j'ai ça :
class="jsformcheckCharLength-6-18-Votre-mot-de-passe-doit-contenir-entre-6-et-18-caractères"

Ouaaaaahhh ca commence à être toute une class ca ! Ce ne serait pas plus judicieux de créer un array avec toutes les validations à faire avec les différents inputs et leur ID ?

Mais bon, tu as peut-être tes raisons de vouloir faire comme ca, mais je trouve ca quand même étrange. Un array me semblerait plus intéressant.
Modifié par Tony Monast (09 Dec 2005 - 20:35)

Je vais m'expliquer un peu plus : l'idée est simple au départ.

Le but est d'automatiser la validation basique d'un formulaire. En renseignant l'attribut class des champs d'un ou plusieurs formulaires, le script se charge automatiquement de créer la fonction de validation correspondante. Ce qui permet d'externaliser le script et de ne laisser qu'une ligne <script src="..."></script> dans le head.
Bon, ça fait encore planter firefox pour une raison fort obscure, le message d'erreur n'est pas courant...

Je crois que les 44 lignes qui constituent le code actuel (pas énormément de possibilités pour l'instant, mais ... mais ... ça viendra) parlent mieux que mes mots. Je m'excuse d'avance, c'est peut-être un peu long... Voici donc une copie de mon fichier .js :

/*
Form Checker
version 0.1 du 09.12.2005

Copyright © 2005, QuentinC
*/

// Initialisation du processus de vérification automatique de formulaire
function formChecker () {
var code = "";
for (var k = 0; k < document.forms.length; k++) {
code = "";
var f = document.forms[k];
for (var i=0; i < f.elements.length; i++) {
if (f.elements[i].className && f.elements[i].className.substring(0,4)=="jsfc") {
var cn = f.elements[i].className;
var n = cn.indexOf(' '); if (n==-1) n = 1000;

code += "e = el[" + i + "];\r\n" +formCheckerGetCode(cn.substring(4, n)) +"\r\n";
}}
if (code) f.onsubmit = new Function('',"var el = this.elements;\r\nvar e = null;\r\n\r\n"+code+"\r\n\r\nreturn true;");
}
//fin
}

function formCheckerGetCode (str) {

var param = str.split("-");
param[0] = param[0].toLowerCase();

if (param[0] == "email") {
return 'if (!(/^[-a-z0-9\\._]{3,}@[-a-z0-9_]{2,}\\.[a-z]{2,4}$/g).test(e.value)) { alert("L\'adresse e-mail que vous avez saisie est invalide."); e.focus(); e.select(); return false; }\r\n';
}
else if (param[0] == "charlength") {
return "if (e.value.length < " + param[1] + " || e.value.length > " + param[2] + ") { alert(\"" + (param.length>3? param[3].split('_').join(' '):'Ce champ') + " doit contenir entre " + param[1] + " et " + param[2] + " caractères.\");"
+ "\r\ne.focus(); e.select(); return false; }\r\n";
}


}

if (window.attachEvent) window.attachEvent('onload', formChecker);
else if (window.addEventListener) window.addEventListener('load', formChecker, false);

[/i][/i][/i]

QuentinC a écrit :
Ce qui permet d'externaliser le script et de ne laisser qu'une ligne <script src="..."></script> dans le head.

Oui, d'accord, mais en mettant le type de validation, le message d'erreur et d'autres paramètres directement dans l'attribut class d'un input html, tu n'externalise plus grand chose. Le but n'est-il pas d'externaliser le maximum de choses du document html ? Séparer le comportement de la structure ?

J'opterais plutôt pour un script central de validation, et pour chaque formulaire, tu définis un autre fichier javascript externe contenant un array qui fait référence aux ID des inputs, et aux autres paramètres : longueur min-max, message d'erreur etc... Le fichier central rechercherait toujours ce fameux array pour valider automatiquement le formulaire.
Modifié par Tony Monast (09 Dec 2005 - 22:28)

Quand on pourra mettre
<input type="number" min="0" max="100" /> ou quelque chose de similaire, ça ne servira plus à rien, ce type de script...

Pour revenir à ce que tu disais, le problème, c'est que ça implique un fichier javascript différent pour chaque page. Donc au final, ça ne sert plus à rien, autant tout mettre dans le même paquet à ce moment-là. C'est autant de requêtes HTTP en moins...
Autant pour les CSS c'est à chaque fois le même fichier donc la mise en cache est possible, autant dans ce cas là c'est impossible puisque le fichier est différent à chaque page.

QuentinC a écrit :
Pour revenir à ce que tu disais, le problème, c'est que ça implique un fichier javascript différent pour chaque page.

Et alors ? Lorsque tu ajoute les informations dans l'attribut class, pour chaque input, tu le fais pour chaque page de toutes façons. Alors entre :

1. Pour chaque page, aller jouer dans l'attribut class de chaque input pour ajouter ou modifier les informations de validation

2. Pour chaque page, juste modifier le fichier js externe de configuration

Je préfère le deuxième.

Au niveau de la cache, utiliser les class n'optimise rien, contrairement à mon fichier js externe qui lui se met en cache pour chaque formulaire.

QuentinC a écrit :

Donc au final, ça ne sert plus à rien, autant tout mettre dans le même paquet à ce moment-là. C'est autant de requêtes HTTP en moins...

Non, mon idée est d'avoir deux fichiers js. Par exemple :

- ValidationSystem.js qui lui sera utilisé par tous les formulaires, par tous tes sites. Il contient les fonctions de validation.

- ConfigFormX.js qui lui sera utilisé pour chaque formulaire. Il contient les données nécessaires pour valider correctement chaque champ d'un formulaire X. (le array : InputID, Min, Max, MsgErreur etc... comme tu veux)

Ton fichier ValidationSystem.js serait en cache, et l'autre en cache mais par formulaire.

Les codes sont en modules, et non éparpillés dans le code html. La maintenance est beaucoup plus facile.
Modifié par Tony Monast (09 Dec 2005 - 23:22)

Ouaif.... je ne suis pas convaincu

Je me permets de revenir au problème d'El Riiico (après tout ma proposition devrait intéresser QuentinC aussi), mais pourquoi ne pas utiliser un input hidden ?

<textarea id="monTexte" name="monTexte" cols="50" rows="5">Que voilà un joli texte&#160;!</textarea>
<input type="hidden" id="monTexte-max-length" value="30" />

C'est valide et la valeur est très facilement récupérable en javascript (nul besoin de spliter ni de faire gaffe aux caractères non autorisés dans les noms de classes).

Le seul inconvénient que je vois c'est que ça alourdit légèrement (mais inutilement) la requête au moment de la soumission du formulaire, mais pour y pallier il suffit de sortir l'input hidden du form.

Des objections ? (Un volontaire pour sortir une théorie sur la sémantique de l'input hidden ? J'en frémis d'avance)

(il y a un vrai problème casse-c******* quand on prévisualise un message contenant </textarea>)
Modifié par djfeat (10 Dec 2005 - 10:51)

Bonjour,

Comme le signalait bien Quentin, vous êtes en plein dans une insuffisance patente d'HTML4.01, qui ne répond pas à ce type de besoin. Ce n'est pas tout à fait pour rien qu'on va trouver justement tout un pan des propositions HTML5.0 du WhatWG, tout comme un pan d'Xforms, portant sur ce problème des données de validation des formulaires

Cela signifie concrètement qu'il ne s'agit ici que de pis-aller, dans lesquels les uns et les autres trouveront plus ou moins bien leur compte, selon leur approche et leurs contraintes, aucune solution n'étant pleinement satisfaisante, et chacune étant utile en attendant mieux.

Sinon, pour la "sémantique des input hidden" : pour une fois que quelque-chose ne pose pas de problèmes immédiats, on va peut-être éviter
Modifié par Laurent Denis (10 Dec 2005 - 11:12)

Ouf ! Une demi-heure pour afficher un topic et pour y répondre... le serveur doit avoir un problème !
<edit> Heureusment, ce n'était que passager. Tout semble être rentré dans l'ordre </edit>

L'idée des input hidden est effectivement très intéressante. Pour ne pas surcharger l'envoi, il est peut-être possible de lui ajouter un disabled="disabled". Je n'ai pas testé mais en règle générale un disabled fait que la donnée correspondante n'est pas envoyée. Ca doit être pareil pour un input hidden.

Et merci Laurent pour ces explications.
Modifié par QuentinC (10 Dec 2005 - 12:57)

je veux pas avoir l'a

Plaît-il ?