Rendre un champ de forumaire obligatoire sous condition

Question

9 Aug 2012 à 18:34

Bonjour,

J'essaye d'apprendre à coder en javascript et j'avoue que j'ai beaucoup de mal. je n'arrive pas à appliquer la théorie à la pratique et j'ai la tête qui commence à chauffer sérieusement.
je chercher à rendre un champ "etablissement" obligatoire et un champ"nom/prénom" bloqué" à la suite d'une sélection dans une liste déroulante. je sais qu'il me fait faire appel à des variables, des fonctions et à "if... esle", mais je ne sais pas comment commencer mon code. en fait je ne sais pas du tout comment l'écrire et ça me rend folle. Smiley bawling

y aurai-t-il une ame charitable qui voudrait bien me guider et m'aider à écrire ce script. comme ça peut etre que je comprendrait un peu mieux avec un exemple concret
je vous remercie bcp d'avance. Je me sent ridicule car tout le monde à l'aire de trouver cela super facile, et moi je nage complètement! Smiley confus

niuxe

Modérateur

9 Aug 2012 à 19:48

Et l'eau,

J'ai pas bien saisi ton souci. Peux tu mieux l'expliquer et aussi mettre ton code html afin que je puisse t'aider. Cependant, je veux voir un code html correct. Smiley cligne

Je pars du principe que tu as les bases nécessaire pour la suite.

Bien que je connaisse parfaitement jcuicui, je vais t'aider à le faire en JS natif. Par la suite et à titre d'information et si j'ai suffisamment de temps, je te ferai le code en jcuicui.

à toi de jouer
Modifié par niuxe (09 Aug 2012 - 19:49)

american_poussin

9 Aug 2012 à 21:05

Salut,

alors, oui c'est sur c'était pas très clair mon histoire Smiley confused

Alors en fait voilà.
J'ai une liste déroulante appelée "client" dans cette liste mon visiteur doit choisir s'il fait partie d'un établissement de soins (ex un hopital,...) ou s'il est un praticien libéral (kiné,....), ou autre.
Une fois son choix fait, je voudrais deux options:
s'il fait partie d'un établissement de soins, je voudrais que le champ "Etablissement" soit obligatoire pour qu'il indique le nom de son établissement; et je voudrais que le champs "Nom/Prénom" soit désactivé car je n'en ai pas besoin.

s'il est un praticien en revanche, je voudrais désactiver le champ" Etablissement" car il n'a rien à inscrite dedans, et par contre rendre obligatoire le champ "Nom /prénom"

voilà. ci dessous je t'envoie mon code html pour mon formulaire.
comme je le disais, je débute tout juste ma formation en javascript et j'ai beaucoup de mal. ça me semble tellement compliqué, mais en même temps c'est indispensable pour faire des sites intéressant.
voilà.
je te remercie d'avance pour ton aide.


<form action="contact.php" method="post" name="Contact" id="form">
        	<fieldset id="identification">
            	<label for="identification">Vous êtes:</label>
                	<select id="client">
                    	<option value=""></option>
                     <optgroup label="Etablissement" id="etablissement">
                     	<option value="CRF">CRF</option>
                        <option value="SSR">SSR</option>
                        <option value="Hôpital">Hôpital</option>
                        <option value="Ehpad">Ehpad</option>
                        <option value="Ecole">Ecole</option>
                     </optgroup>
                     <optgroup label="Praticien" id="praticien">
                     	<option value="Ostéo">Ostéopathe</option>
                        <option value="Kiné">Kinésithérapeute</option>
                        <option value="Sage-femme">Sage-Femme</option>
                     </optgroup>
                     <optgroup label="Autre" id="Autre">
                     	<option value="Autre">Autre</option>
                     </optgroup>  
                   
                     </select>
             </fieldset>
             
             <fieldset id="info">
             
             	<label for="Centre" class="infolabel"><span>*</span>Etablissement:
                 <input type="text" name="Centre" id="Centre" /></label>
             	<label for="Nom-Prénom" class="infolabel"><span>*</span>Nom/Prénom :
                	<input type="text" name="Nom-Prénom" id="Nom-Prénom" /></label>
                
                <label for="Fonction" class="infolabel"><span>*</span>Fonction :
                	<input type="text" name="fonction" id="fonction" /></label>
                    
                <label for="Adresse" class="infolabel"><span>*</span>Adresse :
                	<input type="text" name="Adresse" id="Adresse" /></label>
                
                <label for="Code_postal" class="infolabel"><span>*</span>Code Postal :
                	<input type="number" name="Code_postal" id="Code_postal" maxlength="5" /></label>
                
                <label for="Ville" class="infolabel"><span>*</span>Ville :
                	<input type="text" name="Ville" id="Ville" /></label>
                
                <label for="Tel" class="infolabel"><span>*</span>Tel :
                	<input type="tel" name="tel" id="tel" maxlength="10" /></label>
                    
                <label for="Mail" class="infolabel"><span>*</span>Mail :
                	<input type="email" name="email" id="email" /></label>
             </fieldset>
             
             <fieldset id="message">
             	<label for="message" class="messagelabel">Votre message :</label>
                	<textarea cols="30" rows="5"></textarea>
                    
                    <br />
             
             
             	<input type="submit" value="Envoyer" class="bouton" />
                <input type="reset" Value="Effacer"  />
                
              </fieldset>
        </form>

Merci encore pour ton aide future Smiley biggrin

niuxe

Modérateur

9 Aug 2012 à 23:47

Ci dessous, tu trouveras le code JS pour te mettre bien dans la voie. La vérification est presque terminée. Je te laisse le soin de faire la vérification du textarea. Je n'ai pas mis l'insertion de message d'erreur. Cependant les champs auront une bordure rouge dans le cas ou l'utilisateur aura saisie une valeur erronée. J'ai également supprimé les champs HTML5. j'ai remplacé ces derniers par du bon vieux xhtml/html4. A ma connaissance, le champ tel nexiste pas. Je crois que tu as eu un moment d'exotisme (erf c'est l'été et on pense aux tropiques).

[i]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>bla</title>
    <style type="text/css">label{display:block;}</style>
</head>
<body>
    
<form action="contact.php" method="post" name="Contact" id="form">
        	<fieldset id="identification">
            	<label for="identification">Vous êtes:</label>
                	<select id="client">
                    	<option value=""></option>
                     <optgroup label="Etablissement" id="etablissement">
                     	<option value="CRF">CRF</option>
                        <option value="SSR">SSR</option>
                        <option value="Hôpital">Hôpital</option>
                        <option value="Ehpad">Ehpad</option>
                        <option value="Ecole">Ecole</option>
                     </optgroup>
                     <optgroup label="Praticien" id="praticien">
                     	<option value="Ostéo">Ostéopathe</option>
                        <option value="Kiné">Kinésithérapeute</option>
                        <option value="Sage-femme">Sage-Femme</option>
                     </optgroup>
                     <optgroup label="Autre" id="Autre">
                     	<option value="Autre">Autre</option>
                     </optgroup>  
                   
                     </select>
             </fieldset>
             
             <fieldset id="info">
             
             	<label for="Centre" class="infolabel"><span>*</span>Etablissement:
                 <input type="text" name="Centre" id="Centre" /></label>
             	<label for="NomPrenom" class="infolabel"><span>*</span>Nom/Prénom :
                	<input type="text" name="NomPrenom" id="NomPrenom" /></label>
                
                <label for="Fonction" class="infolabel"><span>*</span>Fonction :
                	<input type="text" name="fonction" id="fonction" /></label>
                    
                <label for="Adresse" class="infolabel"><span>*</span>Adresse :
                	<input type="text" name="Adresse" id="Adresse" /></label>
                
                <label for="Code_postal" class="infolabel"><span>*</span>Code Postal :
                	<input type="text" name="Code_postal" id="Code_postal" maxlength="5" /></label>
                
                <label for="Ville" class="infolabel"><span>*</span>Ville :
                	<input type="text" name="Ville" id="Ville" /></label>
                
                <label for="Tel" class="infolabel"><span>*</span>Tel :
                	<input type="text" name="tel" id="tel" maxlength="10" /></label>
                    
                <label for="Mail" class="infolabel"><span>*</span>Mail :
                	<input type="text" name="email" id="email" /></label>
             </fieldset>
             
             <fieldset id="message">
             	<label for="message" class="messagelabel">Votre message :</label>
                	<textarea cols="30" rows="5"></textarea>
                    
                    <br />
             
             
             	<input type="submit" value="Envoyer" class="bouton" />
                <input type="reset" Value="Effacer"  />
                
              </fieldset>
        </form>
<script type="text/javascript">
    window.onload = function(){
        var form = document.getElementById('form');
        if(form){
            form.onsubmit = function(){
                //initialisation
                var selectClient = document.getElementById('client'),
                    nomPrenom = document.getElementById('NomPrenom'),
                    etablissement = document.getElementById('Centre'),
                    elNomPrisEnCharge = '',
                    ElInput = document.getElementsByTagName('input'),
                    compteur = 0;
                
                //remise à zéro
                nomPrenom.removeAttribute('style');
                nomPrenom.parentNode.getElementsByTagName('span').item(0).removeAttribute('style');
                etablissement.removeAttribute('style');
                etablissement.parentNode.getElementsByTagName('span').item(0).removeAttribute('style');
                for(var i = 0 ; i < ElInput.length; i++){
                    ElInput[i].removeAttribute('style');
                    ElInput[i].disabled = '';
                } 
                //spécificité
                switch(selectClient.value){
                    case 'CRF': case 'SSR':case 'Hôpital': case 'Ehpad': case 'Ecole':
                        elNomPrisEnCharge = nomPrenom.id;
                        nomPrenom.disabled = 'disabled';
                        nomPrenom.parentNode.getElementsByTagName('span').item(0).style.display = 'none';
                        break;
                    case 'Ostéo': case 'Kiné': case 'Sage-femme':
                        elNomPrisEnCharge = etablissement.id;
                        etablissement.disabled = 'disabled';
                        etablissement.parentNode.getElementsByTagName('span').item(0).style.display = 'none';
                        break;
                    case 'Autre':
                        break;
                    default:
                        break;
                }
                
                //vérification erreur
                for(var i = 0 ; i < ElInput.length; i++){
                    if(ElInput[i].id != elNomPrisEnCharge && ElInput[i].value != "Envoyer" && ElInput[i].value != "Effacer"){
                        switch(ElInput[i].id){
                            case 'Centre': case 'NomPrenom': case 'fonction': case 'Adresse': case 'Ville': case 'tel':
                                if(ElInput[i].value == ''){
                                    ElInput[i].style.borderColor = 'red';
                                    compteur += 1;
                                }
                                break;
                            case 'Code_postal':
                                var motifCodePostal = /^[0-9]{5}$/;
                                if(!motifCodePostal.test(ElInput[i].value)){
                                    ElInput[i].style.borderColor = 'red';
                                    compteur += 1;
                                }
                                break;
                            case 'email':
                                var motifEmail = /^[a-z0-9._\-]+@[a-z0-9._\-]{2,}\.[a-z]{2,4}$/;
                                if(!motifEmail.test(ElInput[i].value)){
                                    ElInput[i].style.borderColor = 'red';
                                    compteur += 1;
                                }
                                break;
                            default:
                                break;
                        }
                    }
                }
                
                if(compteur > 0)
                    return false;
            }
        }
        
    }
</script>
</body>
</html>

Si tu as des questions n'hésite pas. Smiley smile

[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i] [/i]
Modifié par niuxe (09 Aug 2012 - 23:59)

tm™

10 Aug 2012 à 08:20

niuxe a écrit :
A ma connaissance, le champ tel nexiste pas. Je crois que tu as eu un moment d'exotisme (erf c'est l'été et on pense aux tropiques).

Salut niuxe,

Non, non, il y a bien un

<input type="tel">

en html5...
Rien de tel qu'un peu d'exotisme !!! ^_^
tm

american_poussin

10 Aug 2012 à 08:25

Je te suis vraiment reconnaissante.
je crois que j'ai tout compris.
connaitrais tu un site ou un bouquin qui ait des exercices pour pratiquer javascript?
car si je comprend, je me rend compte que j'aurais été incapable de le faire moi même car
je n'aurais pas su comment commencer et structurer le code.

j'ai qq questions sur le code:
ligne 5 ça me met une erreur de syntaxe que je ne vois pas???
pourquoi ligne 12 mets tu: elNomPresEncharge =' ',
ligne 14 compteur = 0;
ligne 21 je ne comprend pas la déclaration Smiley bawling

Merci beaucoup j'espère que c'est pas l'écriture de mon code qui t'a fait envoyer le message aussi tard Smiley confused

Et si tu connais des tuto bien sur le javascript, je prend comme ça j'embète plus personne et je me débrouille seule Smiley confused

american_poussin

10 Aug 2012 à 08:39

Erreur de syntaxe résolue, mais mon code ne fonctionne pas Smiley confus

niuxe

Modérateur

10 Aug 2012 à 20:49

Bonsoir,

@tm : Oui en effet, je ne me souvenais plus de cela. Je t'avoue qu'hier soir, je n'ai pas trop cherché.

@american_poussin :

Pas de souci c'est un plaisir de t'aider. J'ai bien lu dans ton message que t'étais un peu perdu.

Non je n'ai pas mis 10 ans pour faire le script (j'ai dû mettre 20/30 minutes). Hier soir j'ai posté ma réponse et un peu plus tard (aux alentours de 23h15), je me suis reconnecté pour voir si tu avais posté une réponse.

Pour répondre à tes questions :

a écrit :

pourquoi ligne 12 mets tu: elNomPresEncharge =' ',

Plus loin dans le script, j'écris :


//...
//id élément que je ne veux pas récupérer
elNomPrisEnCharge = nomPrenom.id;
//...

// je ne récupère pas l'élément (si l'élément courant est différent de nomPrenom
if(ElInput[i].id != elNomPrisEnCharge && ElInput[i].value != "Envoyer" && ElInput[i].value != "Effacer"){
//je peux faire ma vérif
//...
//...

a écrit :

ligne 14 compteur = 0;

[i]
//...
form.onsubmit = function(){
//...
//chaque fois que l'utilisateur soumet le formulaire, les valeur reviennent à zéro. Pourquoi ? bin l'utilisateur peut se tromper 2/3/4/... dans sa saisie
var compteur = 0;
//...
//si la saisie de ce champ est vide
if(ElInput[i].value == ''){
     ElInput[i].style.borderColor = 'red';
//incrémente le compteur de 1
     compteur += 1;
}
//...
//si le compteur est supérieur à zéro (donc il y a des erreurs de saisie)
if(compteur > 0)
//stop la redirection
    return false;

a écrit :

ligne 21 je ne comprend pas la déclaration

Peux tu me dire la ligne stp. Je ne la vois pas

a écrit :
Et si tu connais des tuto bien sur le javascript, je prend comme ça j'embète plus personne et je me débrouille seule

american_poussin

11 Aug 2012 à 18:58

Salut Niuxe,

encore merci pour ton aide. today j'ai fait relache et bronzette au soleil. ça fait du bien Smiley smile

d'ou le temps de réponse un peu long.
Merci pour tous ce liens, je vais regarder tout ça et essayer de trouver le livre ou tuto qui me convient le mieux.
Merci pour toutes tes réponses.
Demain il fait pas beau à priori donc je vais me pencher sur tout ça et essayer de voir si je peux comprendre le javascript! Smiley smile

bon week end a toi

Sujet clos