champs obligatoires en fonction d'un bouton radio

29 juil. 2005, 18:10

Bonsoir

J'ai 3 cases radios et 2 champs de texte.

Lorsque je chosis radio2 je voudrais qu'il soit obligatoire de remplir les 2 champs de texte.
Du style lorsque l'on clique sur Valider on obtienne une alert.

Comment faire ceci en javascript?

Merci

29 juil. 2005, 18:12

Fais donc un tour ici et reviens nous dire où tu en es :
http://www.toutjavascript.com/savoir/savoir06.php3

29 juil. 2005, 18:16

Voila ou j'en suis!!...

Et ce que je voudrais c'est lorsque l'utilisateur choisit le bouton radio CDI, les champs date d'entrée et date de sortie soient obligatoires.

Code : Tout sélectionner

<script language="JavaScript">
function bloque(formulaire,champ) { // Fonction de blocage de la saisie si elle n'est pas conforme
	var controle = eval('document.' + formulaire + '.' + champ); // Creation d'un raccourci pour manipuler le champ
	controle.focus(); // On se place sur le champ incrimine
	controle.select(); // On selectionne le contenu pour faciliter la reprise de la saisie
}

// Fonction de controle des champs vides
var mess = "Les champs suivants sont necessaires au traitement de votre demande :\n"; // Debut du message qui sera affiche en cas d'un ou plusieurs champ(s) vide(s)
var mess_init = "Les champs suivants sont necessaires au traitement de votre demande :\n"; // Copie pour reinitialisation
var necessaire = 0; // Variable marquant l'erreur (0 : tout va bien, 1 : blocage demande)

function vide(formulaire,champ,alerte) {
	var controle = eval('document.' + formulaire + '.' + champ); // Creation d'un raccourci pour manipuler le champ a tester
	if ( controle.type == 'text' ) { // Si c'est un champ 'text'
		if ( controle.value.length < 1 ) { // Et que la valeur du champ comporte moins de 1 caractere (vide)
			mess += alerte; // On ajoute l'intitule du champ dans le message d'erreur
			mess += "\n";
			necessaire = 1; // On marque qu'il ne faut pas valider le formulaire
			}
		}
	if ( controle.type == 'password' ) { // Si c'est un champ de type mot de passe
		if ( controle.value.length < 1 ) {
			mess += alerte;
			mess += "\n";
			necessaire = 1;
			}
		}
	if ( controle.type == 'textarea' ) { // Si c'est un champ de type texte multilignes
		if ( controle.value.length < 1 ) {
			mess += alerte;
			mess += "\n";
			necessaire = 1;
			}
		}
	if ( controle.type == 'select-one' ) { // Si c'est une liste
		if ( controle.options[0].selected ) { // Si c'est le premier element qui est selectionne (element vide a indiquer dans le HTML)
			mess += alerte;
			mess += "\n";
			necessaire = 1;
			}
		}
	if ( controle.type == 'checkbox' ) { // Si c'est une case a cocher
		if (!controle.status) { // Quand elle est cochee, l'etat est 'true', ici on cherche l'inverse (false)
			mess += alerte;
			mess += "\n";
			necessaire = 1;
			}
		}
	}

function vide_radio(formulaire,champ,alerte) { // Fonction pour le test des boutons radio
	var controle = eval('document.' + formulaire + '.' + champ); // Creation d'un raccourci pour manipuler le champ a tester
	var non = "hs"; // On declare par defaut que les champs ne sont pas coches,
	for ( i = 0; i < controle.length; i++ ) {
		if (controle[i].status) { // Si on trouve un bouton coche, on le marque
			non = "ok";
			}
		}
	if ( non != "ok" ) { // Si on n'a pas marque un champ comme 'coche' (ok)
		mess += alerte;
		mess += "\n";
		necessaire = 1;
		}
	}

function resultat(formulaire) { // Fonction de validation du formulaire
	if ( necessaire == 1 ) { // Si on a marque qu'au moins un champ etait vide
		alert(mess); // Affichage du message d'erreur avec tous les champs en erreur
		}
	if ( necessaire == 0 ) { // Si aucun champ n'est vide
		var formu = eval('document.' + formulaire);
		formu.submit(); // Validation du formulaire

		}
	mess = mess_init; // Quoi qu'il arrive, on re-initialise le message d'erreur pour permettre un autre passage des tests
	necessaire = 0;
	}

// Fonction de controle de validite de la saisie
var probleme = 0; // Creation d'une variable pour marquer s'il y a incoherence de saisie ou pas
function validite(formulaire,champ,format,mini,maxi) {
	probleme = 0; // Initialisation de la variable
// Les differents tests possibles :
// On affecte a la variable 'RE' le test d'expression reguliere souhaite
	if ( format == "A" ) { RE = /^([A-Za-z]+[ ]*[-]*[A-Za-z]*)+$/;} //A	: alphabetique
	if ( format == "AN" ) { RE = /^[A-Za-zàâäéèêëîïôùûç\s,'0-9\-]+$/;} //AN	: alphanumerique
	if ( format == "N" ) { RE = /^\d+$/;} //N	: numerique
	if ( format == "CP" ) { RE = /^\d{5}$/;} //CP	: code postal francais (5 chiffres)
	if ( format == "D" ) { RE = /^\d{2}([\/]|[\-])+\d{2}([\/]|[\-])+\d{2}(\d{2})*$/;} //D	: Date (xx/xx/xx ou xx/xx/xxxx ou xx-xx-xx ou xx-xx-xxxx)
	if ( format == "EMAIL" ) { RE = /^[A-Za-z0-9\.\-_]+[@][A-Za-z0-9\-\.]+[\.][A-Za-z][A-Za-z][A-Za-z]?$/;} //EMAIL	: email
	var controle = eval('document.' + formulaire + '.' + champ); // Creation d'un raccourci pour manipuler le champ a tester
	if (controle.value.length > 0) { // On ne fera les tests que si le champ est rempli d'au moins un caractere (pas vide)
		if (!RE.test(controle.value)) { // Si on ne trouve pas dans le champ l'expression reguliere recherchee
			alert('Votre saisie est incorrecte.'); // Envoi d'une alerte
			probleme = 1; // On marque que la saisie n'est pas coherente
			}

// Tests de longueur du champ (nombre de caracteres saisis)
		if ( mini != 0 ) { // Si il a ete specifie '0', le test n'est pas effectue
			if ( controle.value.length < mini ) {// Si la longueur de la saisie est inferieure au minimum demande
				alert('Vous devez saisir au moins ' + mini + ' caracteres.'); // Envoi d'une alerte
				probleme = 1;
				}
			}
		if ( maxi != 0 ) { // Si la longueur de la saisie est superieure au maximum demande
			if ( controle.value.length > maxi ) {
				alert('Vous ne devez pas saisir plus de ' + maxi + ' caracteres.');
				probleme = 1;
				}
			}
		if ( probleme == 1 ) { // Si on a marque qu'il y avait un probleme
			bloque(formulaire,champ); // On active le blocage du champ
			}
		}
	}

function check_num(formulaire,champ,plancher,plafond) { // Fonction de verification d'une plage de nombres (entre X et Y)
	var controle = eval('document.' + formulaire + '.' + champ); // Creation d'un raccourci pour manipuler le champ a tester
	if ( controle.value < plancher ) { // Si la valeur de la saisie est inferieure au plancher demande
		alert('Votre saisie ne doit pas etre inferieure a ' + plancher + '.'); // Envoi d'une alerte
		bloque(formulaire,champ); // On active le blocage du champ
	}
	if ( controle.value > plafond ) { // Si la valeur de la saisie est superieure au plafond demande
		alert('Votre saisie ne doit pas etre superieure a ' + plafond + '.');
		bloque(formulaire,champ);
		}
	}

// Fonction pour verifier la coherence de deux saisies de mot de passe
function check_pw(formulaire,champ1,champ2) { // Cette fonction se declenche a partir du second champ uniquement
	var prems = eval('document.' + formulaire + '.' + champ1); // Creation de deux raccourcis pour manipuler les champ a comparer
	var deuze = eval('document.' + formulaire + '.' + champ2);
	if (!prems.value) { // Si le premier champ n'est pas rempli
		alert('Vous n\'avez pas saisi votre mot de passe'); // Envoi d'une alerte
		bloque(formulaire,champ1); // On active le blocage du champ
		}
	else { // Si le premier champ est rempli
		if ( prems.value != deuze.value ) { // Si la saisie des deux champ est differente
			alert('La confirmation de votre mot de passe n\'est pas exacte.'); // Envoi d'une alerte
			deuze.value = ""; // Reinitialisation des deux champs
			prems.value = "";
			bloque(formulaire,champ1); // On active le blocage du champ

			}
		}
	}

// Fonction pour tester les champs vides (une ligne par champ)
function check_vide() { // Pour autoriser un champ vide, ne pas le referencer dans la liste
	vide('formulaire','nom','- Nom');
	vide('formulaire','prenom','- Prenom');
	vide('formulaire','service','- Service');
	//vide('formulaire','entree','- Entree');
	//vide('formulaire','sortie','- Sortie');
	vide_radio('formulaire','statut','- Statut');
	vide_radio('formulaire','poste','- Type de poste');
	
	resultat('formulaire'); // Validation (sous conditions) du formulaire
	}
</script>
</head>

<body>

<div id="corps">	
<div id="entete"></div>
<div id="centre">

<form name="formulaire" action="creer2.php" method="post" onSubmit="return verifierSaisie()">
  
<table align="center" width="1000" border="1">
  <h3>CREATION</h3><h3><u>Etape n°1 : Enregistrement de l'utilisateur</u></h3><br>
  <tr>
    <td height="30">Nom de l'Utilisateur* : </td>
    <td><input name="nom" type="text" onChange="javascript:this.value=this.value.toUpperCase();" OnBlur="validite('formulaire','nom','AN',0,40);"></td>
    <td>Matricule : </td>
    <td><input name="matricule" type="text" maxlength="10" OnBlur="validite('formulaire','matricule','AN',0,10);"></td>
  </tr>
  <tr>
    <td height="30">Prénom* :</td>
    <td><input name="prenom" type="text" id="prenom2" onChange="this.value=First2UpperCase(this.value);" OnBlur="validite('formulaire','prenom','AN',0,40);"></td>
    <td>Date Demande : </td>
    <td><input type="text" value=<?php echo date('d/m/Y'); ?>></td>
  </tr>
  <tr>
    <td width="180" height="30"><p> Nom du Responsable :</p></td>
    <td width="310"><p><input name="responsable" type="text" id="responsable" onChange="javascript:this.value=this.value.toUpperCase();" OnBlur="validite('formulaire','responsable','AN',0,40);"></p>
		  </td>
    <td width="180">Service* :	</td>
    <td width="310"><input name="service" type="text" onChange="this.value=First2UpperCase(this.value);" OnBlur="validite('formulaire','service','AN',0,40);"></td>
  </tr>
</table>
  
  <br><br>
  
<table align="center" width="1000">
  <tr>
			<td width="200"><fieldset>Statut* : </fieldset></td>
			<td width="200"><fieldset><label for = "CDI"><input name="statut" id="CDI" type="radio" value="CDI">CDI</label></fieldset></td>
			<td width="200"><fieldset><label for = "CDD"><input name="statut" id="CDD" type="radio" value="CDD/Interim">CDD/Interim</label></fieldset></td>
			<td width="200"><fieldset><label for = "Stagiaire"><input name="statut" id="Stagiaire" type="radio" value="Stagiaire">Stagiaire</label></fieldset></td>
			<td width="200"><fieldset><label for = "Autre"><input name="statut" id="Autre" type="radio" value="Autre">Autre</label></fieldset></td>
  </tr>
</table>
  
  <br><br>
  
<table align="center" width="1000">
  <tr>
			<td width="500"><fieldset>Date d'entrée : <input name="entree" type="text" OnBlur="validite('formulaire','entree','D',0,20);"></fieldset></td>
			<td width="500"><fieldset>Date de sortie : <input name="sortie" type="text" OnBlur="validite('formulaire','sortie','D',0,20);"></fieldset></td>
  </tr>
</table>
  
  <br><br>
  
<table align="center" width="1000">
  <tr>
			<td width="250"><fieldset>Type de poste* : </fieldset></td>
			<td width="250"><fieldset><label for = "Fixe"><input name="poste" id="Fixe" type="radio" value="Fixe"> Fixe</label></fieldset></td>
			<td width="250"><fieldset><label for = "Portable"><input name="poste" id="Portable" type="radio" value="Portable"> Portable</label></fieldset></td>
			<td width="250"><fieldset><label for = "Sensible"><input name="poste" id="Sensible" type="radio" value="Sensible"> Sensible</label></fieldset></td>
  </tr>
</table>
  
<br><br>
<p align="center">* Champs obligatoires</p><br>
<p align="center">ATTENTION : Avant de valider vérifier que vous n'avez fait aucune erreur</p>
<p align="center"><input type="button" value="Valider" onClick="check_vide();"></p>
</form>

</div>

</div>

</body>

champs obligatoires en fonction d'un bouton radio

Qui est en ligne