verifier le contenu des champs masqué/affichés selon le choix de la ca

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : verifier le contenu des champs masqué/affichés selon le choix de la ca

charlydar

Bonjour à tous !
Je suis à la recherche de l’aide au niveau de mon code JavaScript.
Le problème est au niveau de ma fonction "verif_formulaire", cette fonction a pour rôle de vérifier si le visiteur a rempli les champs obligatoires masqués qui s'affichent ou non masque. Puisque le visiteur choisi la catégorie dans le List box et les champs correspondants à cette catégorie s'affichent y compris des champs obligatoires et non obligatoires. En cliquant sur le bouton envoyer sans remplir ces champs le message d'alerte s'affiche pour informer le visiteur que les champs obligatoire ne sont pas remplis. Ainsi, dans la pratique ça marche bien avec la catégorie "offre d'emploi" qui est le premier, mais avec la catégorie "voiture" qui est le second, la fonction ne vérifie pas la saisie de tous les champs obligatoires et elle déclenche l'envoie du formulaire à la page de traitement. c'est ça mon soucis . pour tester cela, il suffit d'utiliser le code suivant:

Code :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deposez une annonce</title>
</head>
<body>
<form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">  
<div>
<label for="categorie"><strong >Categorie * :</strong ></label>
<div>
<select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()">
<option value='0' selected>-&#45;Choississez-&#45;</option>  
<option style='background-color:#f2f2f2' disabled id='cat71' >-&#45; EMPLOI -&#45;</option>
<option value='1' id='cat33'>Offres d'emploi</option>
<option style='background-color:#f2f2f2' disabled id='cat1' >-&#45; VEHICULES -&#45;</option>
<option value='2' id='cat2' >Voitures</option>
<option value='3' id='cat3' >Motos</option>
<option value='4' id='cat38' >Autres</option>
</select>
</div>
</div>

<div>
<label><strong >Vous êtez * :</strong ></label>
<label class="radio inline">
<input id="company" name="company" value="Particulier" type="radio" >Particulier
</label>
<label class="radio inline">
<input id="company" name="company" value="Professionnel" type="radio">Professionnel
</label>
</div>

<div>
<label for="objet"><strong >Type d'annonce* :</strong></label>
<div>
<select id="type_annonce" name="type_annonce">
<option value="">-&#45;Choississez-&#45;</option>
<option value=1>Offres</option>  
<option value=2>Demandes</option>
<option value=3>Location</option>  
</select>
</div>
</div>

<div>
<label id="sujet_for" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label>
<label id="sujet_for_offre_demploi" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label>
<div >
<input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" >
</div>
</div>


<div>
<label id="message" style="display:block;" for="message"><strong >Texte de l'annonce * :</strong></label>
<label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong >Description du poste * :</strong></label>
<div>
<textarea id="message" name="message" rows="7" cols="60"></textarea>
</div>
</div>
<!-- groupe 2-->  
<div id="groupe2" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label id="marque_for" for="marque"><strong >Marque </strong></label>
<select name="marque" id="marque" >
<option value="" selected>&#171;Choisissez&#187;</option>
<optgroup label="Marques Courantes">  
<option value="Audi" >Audi </option>
<option value="Bmw" >Bmw </option>
<option value="Volkswagen" >Volkswagen </option>  
</optgroup>
<optgroup label="Autres Marques">
<option value="Mastretta" > Mastretta </option>
<option value="Maybach" > Maybach </option>
</optgroup>
</select>
</div>
<div>
<label for="model_year" ><strong >Année Modèle </strong></label>
<div>
<select name="model_year" id="model_year" >
<option value="" selected>&#171;Choisissez&#187;</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="carburant"><strong >Carburant *</strong></label>
<div >
<select name="carburant" id="carburant" >
<option value="" selected>&#171;Choisissez&#187;</option>
<option value="Essence" >Essence</option>
<option value="Diesel" >Diesel</option>
<option value="GPL" >GPL</option>
<option value="Electrique" >Electrique</option>
<option value="Autre" >Autre</option>
</select>
</div></div>  

<div>
<label id="model_for" for="modele"><strong >Modèle *</strong></label>
<div class="controls">
<input name="model" id="model" type="text" value="">
</div></div>
</div>

<div>
<div>
<label for="boite_vitesse"><strong >Boite de vitesse *</strong></label>
<div >
<select name="boite_vitesse" id="boite_vitesse">
<option value="" selected>&#171;Choisissez&#187;</option>
<option value="manuelle" >Manuelle</option>
<option value="automatique" >Automatique</option>
</select>
</div></div>

<div >
<label for="kilometrage"><strong ><strong>Kilometrage: km *</strong></label>
<div class="controls">
<input name="kilometrage" id="kilometrage" type="text" value="">
</div>
</div>
</div>
</div><!--fin div style categ-->
<!--fin roupe--> </div>

<!-- groupe33-->
<div id="groupe33" style="display:none">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label for="Type_de_contrat"><strong >Type de contrat *</strong></label>
<div >
<select name="Type_de_contrat" id="Type_de_contrat">  
<option value="0" selected>&#171;Choisissez&#187;</option>  
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Int&eacute;rim</option><option value="4" >Ind&eacute;pendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>  
</select>
</div></div>

<div>
<label><strong >Travail à :</strong ></label>
<label >
<input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span>
</label>
<label >
<input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span>
</label>
</div>

<div >
<label ><strong >Vous souhaitez recevoir les candidatures via :</strong ></label>
<label >
<input type="radio" name="adreply_type" value="1" checked="checked">  
<span class="text mrl">Votre email</span>
</label>
<label >
<input type="radio" name="adreply_type" value="2" >  
<span class="text">Votre site web</span>
</label>
</div>
</div>
<div>
<div >
<label for="Secteur_d_activite"><strong >Secteur d'activité </strong></label>
<div >
<select name="jobfield" id="jobfield" >  
<option value="0" selected>&#171;Choisissez&#187;</option>  
<option value="1" >Agriculture</option><option value="4" >Banque/Assurance/Finance</option><option value="2" >BTP/Construction</option><option value="3" >Commerce/Distribution</option><option value="13" >H&ocirc;tellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >M&eacute;decine/Sant&eacute;</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >T&eacute;l&eacute;com/Internet/M&eacute;dias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>  
</select>
</div></div>

<div >
<label for="Fonction"><strong >Fonction </strong></label>
<div>
<select name="jobduty" id="jobduty" class="select">  
<option value="0" selected>&#171;Choisissez&#187;</option>  
<option value="1" >Administration/Services g&eacute;n&eacute;raux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilit&eacute;/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction G&eacute;n&eacute;rale</option><option value="16" >Etudes/Recherches/Ing&eacute;nieries</option><option value="15" >Formation/Education</option><option value="7" >H&ocirc;tellerie/Restauration</option><option value="8" >Informatique/Internet</option><option value="9" >Juridique</option><option value="10" >Logistique/Achat/Transport</option><option value="11" >Marketing/Communication</option><option value="18" >M&eacute;decine/Sant&eacute;</option><option value="12" >M&eacute;nage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Op&eacute;rations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >S&eacute;curit&eacute;/D&eacute;fense/Gardiennage</option><option value="14" >Services &agrave; la personne</option><option value="20" >Service Client/Accueil</option>  
</select>
</div></div>

<div>
<label for="experience"><strong >Expérience * </strong></label>
<div>
<select name="jobexp" id="jobexp">  
<option value="0" selected>&#171;Choisissez&#187;</option>  
<option value="1" >0 &agrave; 2 ans</option><option value="3" >2 &agrave; 5 ans</option><option value="5" >5 ans et plus</option>  
</select>
</div></div>
</div>

<div>
<div>
<label for="jobstudy"><strong >Niveau d'études *</strong></label>
<div>
<select name="jobstudy" id="jobstudy" class="select">  
<option value="0" selected>&#171;Choisissez&#187;</option>  
<option value="1" >Sans dipl&ocirc;me</option><option value="2" >BEPC/BET</option><option value="3" >Employ&eacute;/Ouvrier sp&eacute;cialis&eacute;/Bac</option><option value="4" >Technicien/Employ&eacute;/Bac+2</option><option value="5" >Agent de ma&icirc;trise/Bac+3</option><option value="6" >Ing&eacute;nieur/Cadre/Bac+5 ou plus</option>  
</select>
</div>
</div>

<div>
<label class="control-label" for="adreply_redirect"><strong >Lien de redirection vers votre offre d'emploi (site recruteur) *</strong></label>
<div class="controls">
<input type="text" id="adreply_redirect" name="adreply_redirect" value="" class="nude">
</div>
</div>
</div>
</div><!--fin div style categ-->
</div><!--fin groupe 33-->

<div style="background:#f2f2f2;">
<h3 style="padding-left: 1rem;color:#0088cc;font-size: 16px;">Vos informations</h3>
</div><!--fin div style categ-->
<div >
<label for="prenom"><strong >Votre prénom * :</strong></label>
<div>
<input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" >
</div>
</div>
</div>

</div>
</div>
<div >
<p class="text-right"><strong>Champs obligatoires *</strong></p>
<hr>
<div>
<label for="valider">Valider</label>
<input type="submit" name="envoye" value="Valider">
<input type="reset" value="Initialiser">
</div>
</form>
[code=js]
<script>
// script champ hidden  
function afficherAutre() {
var so = document.getElementById("sujet_for_offre_demploi" );
var s = document.getElementById("sujet_for" );
var m = document.getElementById("message" );
var mo = document.getElementById("message_offre_demploi" );
var gp2 = document.getElementById("groupe2" );
var gp33 = document.getElementById("groupe33" );

// cat1  
if (document.form4.categorie.value == 1)
{
if (so.style.display == "none" )
{so.style.display = "block";}

if (s.style.display == "block" )
{s.style.display = "none";}

if (m.style.display == "block" )
{m.style.display = "none";}

if (mo.style.display == "none" )
{mo.style.display = "block";}

if (gp33.style.display == "none" )
{gp33.style.display = "block";}

}
else
{
so.style.display = "none";
s.style.display = "block";
m.style.display = "block";
mo.style.display = "none";
gp33.style.display = "none";
}
// gp2  
if (document.form4.categorie.value == 2)
{

if (gp2.style.display == "none" )
{gp2.style.display = "block";}
}
else
{
gp2.style.display = "none";
}
}

function verif_formulaire()
{
var gp2 = document.getElementById("groupe2" );
var gp33 = document.getElementById("groupe33" )

if(document.form4.categorie.value == "0" ) {
alert("votre categorie ?" );
document.form4.categorie.focus();
return false;
}

if(document.form4.company.value == "" ) {
alert("veuillez cocher la qualification" );
document.getElementById("company" ).focus();
return false;
}

if(document.form4.type_annonce.value == "" ) {
alert("Votre type d'nnonce ?" );
document.form4.type_annonce.focus();
return false;
}

if(document.form4.sujet.value == "" ) {
alert("Sujet de votre annonce ?" );
document.form4.sujet.focus();
return false;
}

if(document.form4.message.value == "" ) {
alert("Votre message ?" );
document.form4.message.focus();
return false;
}

if(document.form4.prenom.value == "" ) {
alert("Votre prenom ?" );
document.form4.prenom.focus();
return false;
}

// Champs Masqués/Affichés
//gp33
if(document.form4.Type_de_contrat.value == "0" ) {
if (gp33.style.display == "block" ){
alert("Veuillez indiquer le type de contrat." );
document.form4.Type_de_contrat.focus();
return false;
}
}

if(document.form4.jobexp.value == "0" ) {
if (gp33.style.display == "block" ){
alert("Veuillez choisir un type." );
document.form4.jobexp.focus();
return false;
}
}

if(document.form4.adreply_redirect.value == "" ) {
if (gp33.style.display == "block" ){
alert("Veuillez indiquer l'adresse de redirection." );
document.form4.adreply_redirect.focus();
return false;
}
}

if(document.form4.jobstudy.value == "0" ) {
if (gp33.style.display == "block" ){
alert("Veuillez selectionner le niveau d'étude." );
document.form4.jobstudy.focus();
return false;
}
}

// Champs masqués/ affichés
// gp2
if(document.form4.model.value == "" ) {
if (gp2.style.display == "block" ){
alert("Veuillez indiquer le modèle." );
document.form4.model.focus();
return false;
}
}

if(document.form4.boite_vitesse.value == "" ) {
if (gp2.style.display == "block" ){
alert("Veuillez selectionner la boite de vitesse." );
document.form4.boite_vitesse.focus();
return false;
}
}

if(document.form4.km.value == "" ) {
if (gp2.style.display == "block" ){
alert("Veuillez indiquer le kilometrage." );
document.form4.km.focus();
return false;
}
}

if(document.form4.carburant.value == "" ) {
if (gp2.style.display == "block" ){
alert("Veuillez selectionner le carburant." );
document.form4.carburant.focus();
return false;
}
}
}
</script>

</body>
</html>

[/code]

Publicité

MaybeEijOrNot

but someone at least

Bonjour,

Un exemple précis? Car en effet chez moi ça fonctionne avec :

Catégorie : voiture
Vous êtes : particulier
type annonce : offre
Titre de l'annonce : aaa
Texte de l'annonce : aaa
Carburant : diesel
Modèle :
Boîte de vitesse : manuelle
Kilométrage km : aaa
Votre prénom : aaa

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charlydar

Merci de la réponse !
Vous devez tester les champs obligatoires affichés non rempli par le visiteur tout en validant le formulaire. Vous allez remarquer qu’à la catégorie "voiture", la fonction JS ne vérifie pas si tous les champs obligatoires sont remplis. Au contraire, l'envoie du formulaire s'en suit après vérification de 3/4 champs obligatoires. C’est ça mon souci. Le projet est bloqué depuis plusieurs jours.

MaybeEijOrNot

but someone at least

C'est bien ce que fais mon exemple? Le champ "modèle" n'est pas rempli, j'ai un avertissement et le formulaire n'est pas transmis. J'ai essayé avec d'autres champs obligatoires et même résultat.

D'où : pouvez-vous donner un exemple précis?

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

MaybeEijOrNot

but someone at least

Code :

document.form4.km.value

La console dit que l'objet "km" n'existe pas et bizarrement elle a raison, il fallait mettre l'objet "kilometrage".
Pour le carburant vous mettez :

Code :

document.form4.carburant.value == ""

Cette condition n'est jamais vraie puisqu'il s'agit d'une sélection...

Bref vérifiez méticuleusement ce que vous avez fait.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charlydar

Merci MaybeEijOrNot !
C’est exactement ça, ça marche !
Comment avez-vous procéder pour trouver l'erreur ?car, là j'ai rien appris ?
Il a fallu que je vienne chez vous pour trouver la solution.

Vraiment merci !
Le projet avance d'un pas géant. Et je vais vérifier sur votre profile s'il y'a un numéro de téléphone et je vais vous appeler.
Vraiment merci, merci et je déclare que le sujet est clos

FORUM HardWare.fr

Programmation

Javascript/Node.js

verifier le contenu des champs masqué/affichés selon le choix de la ca

Sujets relatifs
Sql server un champ avec 3 choix	changer le contenu d'un control
Verifier l'état de la fenêtre d'un exe en C #	Excel 2013, option recherche champs TCD
lecture de fichier pour comparaison de contenu	Choix tablette
Fonction "effacer contenu sur changement" sur 2 cellules	Récupérer le contenu d'un champs de type date en php
Comment bloquer l'INSERT INTO si 2 champs existent déja ?
Plus de sujets relatifs à : verifier le contenu des champs masqué/affichés selon le choix de la ca

Page générée en 0.070 secondes