Validité + JS = incompatible ?

Sujet résolu

19 mai 2006 à 20:23:42

Salut à tous.

Je suis en train de passer au validateur (xhtml 1.0 strict) mes pages web et voilà que je rencontre un problème sur deux pages. Ces deux pages sont deux pages avec un formulaire pour les visiteurs et j'utilise un script JS pour du BBcode.
Cependant, visiblement, un name dans une balise form n'est pas valide !
J'ai essayé de mettre un id à la place mais mon BBcode ne marche plus après. ^^;

Quelqu'un sait comment régler ce problème, s'il vous plaît ?
Merci.

Gectou4

19 mai 2006 à 20:27:01

La seul méthode consiste à apeller un fichier .js et en utiliser les fonction.

Char Aznable

19 mai 2006 à 20:34:43

Excuse-moi, mais je n'ai pas bien compris le truc. ^^;

Gectou4

19 mai 2006 à 20:39:31

et biens si ton script est dans la pages tu dois surement fair un truc style :

<script language="javascript">

</script>
</head>

Hors cette méthode est mauvaise je t'es donné la méthode valide juste ci-dessus...

Enfin si tu le peux privilégié un fichier à inclure :

<script type="text/javascript" src="external.js"></script>

Char Aznable

19 mai 2006 à 20:42:41

Donc, si j'appelle un fichier js, je peux mettre id à la place de name dans le form ? o_O

Gectou4

19 mai 2006 à 20:48:03

id et name sont différents.

ID sert au CSS alors que name sert aux formulaire.

JavaScript peut utiliser l'un où l'autre!
De plus les méthodes d'accés au objets html sont relativement cocasse à rendre compatible entre navigateur!
Pour les formulaires il en existe néanmoins toute une pelleté diverse et varié !

En attendant remorfmule ton problème avec la dite sélection d'ID puisque 'il s'agit de rendre compatible une partie d'un code donné et non plus un code concrétement.

Char Aznable

19 mai 2006 à 20:55:00

Voici le script du BBcode que j'utilise (c'est celui qui se trouve ici):

function bbcode(bbdebut, bbfin)
{
var input = window.document.form1.contenu;
input.focus();
/* pour IE (toujous un cas appar lui

)*/
if(typeof document.selection != 'undefined')
{
var range = document.selection.createRange();
var insText = range.text;
range.text = bbdebut + insText + bbfin;
range = document.selection.createRange();
if (insText.length == 0)
{
range.move('character', -bbfin.length);
}
else
{
range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
}
range.select();
}
/* pour les navigateurs plus récents que IE comme Firefox... */
else if(typeof input.selectionStart != 'undefined')
{
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
var pos;
if (insText.length == 0)
{
pos = start + bbdebut.length;
}
else
{
pos = start + bbdebut.length + insText.length + bbfin.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* pour les autres navigateurs comme Netscape... */
else
{
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos))
{
pos = prompt("insertion (0.." + input.value.length + ";):", "0");
}
if(pos > input.value.length)
{
pos = input.value.length;
}
var insText = prompt("Veuillez taper le texte");
input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
}
}

Voilà le code xhtml:

<a title="gras" href="javascript:bbcode('[b]', '[/b]')"><img src="images/gras.gif" alt="gras"/></a>
<a title="italique" href="javascript:bbcode('[i]', '[/i]')"><img src="images/italique.gif" alt="italique"/></a>
<a title="souligné" href="javascript:bbcode('[u]', '[/u]')"><img src="images/souligne.gif" alt="souligne"/></a>
<a title="texte rayé" href="javascript:bbcode('[r]', '[/r]')"><img src="images/raye.gif" alt="rayé"/></a>
<a title="lien" href="javascript:bbcode('[url]', '[/url]')"><img src="images/lien.gif" alt="lien"/></a>
<a title="image" href="javascript:bbcode('[img]', '[/img]')"><img src="images/image.gif" alt="image"/></a>
<a title="objet flottant droit" href="javascript:bbcode('[fd]', '[/fd]')"><img src="images/floatdroit.gif" alt="float droit"/></a>
<a title="objet flottant gauche" href="javascript:bbcode('[fg]', '[/fg]')"><img src="images/floatgauche.gif" alt="float gauche"/></a>

<form name="form1" action="envoie_dossier.php" method="post">
<p>Titre:
<input type="text" size="30" name="titre" />
</p>
<p>
Contenu :<br/>
<textarea name="contenu" cols="70" rows="20">

</textarea><br/>

<input type="hidden" size="30" name="id" value="<?php echo $tab['id']; ?>"/>
<input type="submit" value="Envoyer" />
</p>

</form>

Et voici l'erreur du validateur:

Citation : Pas de titre

Error Line 239 column 11: there is no attribute "name".

<form name="form1" action="envoie_dossier.php" method="post">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

Gectou4

19 mai 2006 à 21:07:38

hop un petit lien qui fera ton bonheur :
http://openweb.eu.org/articles/validation_formulaire/

a partir de :
La vérification de formulaire en Strict
(fin de page)

shuss

19 mai 2006 à 21:09:32

Les id et les name ont deux utilisations différentes :

Les name servent généralement à parcourir la page avec de longs chemins compliqués tels que document.div.form.input.value... mais les name ne sont pas toujours valides, et parfois ça fait des mélanges entre id et name ... bref c'est pas pratique.

Les id sont parfois utilisés en CSS, mais ce n'est pas là leur but premier (on préferera plus généralement les class) : un id à l'avantage de devoir être TOTALEMENT UNIQUE. Du coup, ton navigateur pourra faire une recherche dans la page pour trouver la SEULE et UNIQUE balise qui à cet id, ceci grâce à document.getElementById('idDeLaBalise');.

Pour revenir à ton code, je te conseille largement d'utiliser les id. Il te suffira de définir un id pour ta balise form (par exemple id="form1"). Ensuite, remplace la ligne var input = window.document.form1.contenu; par var input = document.getElementById('form1').contenu; (au passage, window est facultatif car tout ce passe ici dans la même fenêtre). Remplace plus généralement tous les window.document.form1 par document.getElementById('form1'), mais je crois que c'était la seule ligne.

Voila, prends l'habitude d'utiliser les id, ça permet de mieux se retrouver dans son code.

Char Aznable

19 mai 2006 à 21:13:12

Gectou4, tu es mon héros !

Un grand merci.