Discussion :

[logone]

Salut,

J'ai un formulaire avec des champs de texte qui s'affichent et se cachent suivant si un radio est actif ou pas. Jusque la pas de soucis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function ShowTab2 (E)
{
// 1er choix
document.getElementById("tab3").style.display = (E == 3) ? 'block' : 'none';
document.getElementById("tab4").style.display = (E == 4) ? 'block' : 'none';
document.getElementById("tab5").style.display = (E == 5) ? 'block' : 'none';
}

et mon code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<input name="send" type="radio" onclick="ShowTab2(3)" value="mail" />
              Envoyer nos messages par MAIL</td>
              <td width="443"><div id="tab3" style="display: none;"><span id="sprytextfield1">
              <input type="text" name="sent_mail" id="sent_mail" class="textbox"/>
              <span class="textfieldInvalidFormatMsg">Format non valide.</span><span class="textfieldRequiredMsg">Une valeur est requise.</span></span>

Mon soucis se trouve lors de la validation des champs je ne voudrais valider que le champs texte qui est affiché, j'ai un peu de mal avec javascript et je ne vois pas comment faire. J'ai essayé avec Spry mais lors de la validation il veux forcement me valider tous les champs et pas seulement celui qui est affiché.

C'est surtout un probleme de connaissance de JS grrrrr, merci de votre aide.

[Watilin]

Dans ta fonction de validation, quelque part, il faut que tu rajoutes un test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (this.style.display != 'none') { ...

Comme je ne vois pas le code concerné, je ne peux pas t'aider plus précisément.

[logone]

En faite j'utilise Spry de Dreamweaver qui me rajoute ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email", {validateOn:["submit"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "integer", {isRequired:false, validateOn:["submit"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "integer", {validateOn:["submit"], isRequired:false});
</script>

mais si tu as plus simple je prends, je sais pas du tout comment faire ça

[Watilin]

Mouais.

J'ai jeté un œil à la doc de Spry, avec tous mes préjugés envers Adobe et toute la mauvaise foi dont je suis capable Ce code JavaScript est horriblement statique, on n'a aucun contrôle sur les objets créés... En fait c'est simple, on dirait du code serveur, mais côté client ^^

À mon avis, tu gagneras beaucoup à laisser tomber Spraïe et faire du JS à la main. Sauf, bien sûr, si ton Spraille a déjà métastasé dans tout ton site...

Bref. Je vais te proposer une solution, certes plus longue, mais ô combien plus simple, et te l'expliquer en détails. Ce que fait Spray dans l'état actuel, c'est, au moment où le formulaire est soumis, contrôler tous les champs sur lesquels il y a un validateur. Soit, faisons-le à la main :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
formulaire.onsubmit = function() {
   var ok = validerChamp(document.getElementById('sent_mail'), 'email')
      && validerChamp(document.getElementById('bidule'), 'integer')
      && validerChamp(document.getElementById('truc'), 'integer');
   if (!ok) return false;
}

(Remplace bidule et truc par les vrais noms de tes champs.)

Pour l'instant, la fonction validerChamp n'existe pas, mais nous allons la créer. Elle devra renvoyer une valeur booléenne. Grâce au ET logique (&&), si au moins une de ces valeurs est false, la fonction onsubmit renverra false, et le forumlaire ne sera pas envoyé.

On a besoin que la fonction validerChamp soit capable de valider des emails et des nombres entiers. Pour ça, je vais utiliser des expressions régulières.

• Pour les entiers, le motif est simple : \d+, avec un d comme digit. Pour ne valider que les chaînes qui contiennent seulement des nombres, il faut rajouter les ancres de début (^) et de fin ($) de chaîne, ce qui donne : ^\d+$.
• Pour les emails, j'utilise un motif que j'ai trouvé sur regular-expressions.info : ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$

Voici la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function validerChamp( champ, type ) {
   var chaine = champ.value;
   switch (type) {
      case 'integer': return /^\d+$/.test(chaine);
      case 'email': return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(chaine);
   }
}

Comme tu le vois, cette fonction renvoie directement le résultat de la méthode test des expressions régulières. Ce résultat est une valeur booléenne.
Et si un jour tu as besoin de valider d'autres types de données, il te suffira de rajouter un case et de trouver l'expression régulière qui va bien.