Bonjour à tous !
Je suis à la recherche de l’aide au niveau de mon code JavaScript qui vérifier les champs obligatoires affichés selon le choix du visiteur. En effet, quand le visiteur choisis la catégorie « offre d’emploi » tous les champs masqué de cette catégorie s’affichent et la vérification de saisie au niveau des champs obligatoire se passe bien à partir de la fonction verif_formulaire. Mais quand le visiteur change de catégorie, il y’une erreur que je n’arrive pas à trouver et cela me bloque depuis quelques jours.
S.V.P votre aide m’est précieuse ! ci joint mon code source.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deposez une annonce</title>
<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 gp3 = document.getElementById("groupe3");
var gp4 = document.getElementById("groupe4");
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";
}
// gp3
if (document.form4.categorie.value == 3)
{
if (gp3.style.display == "none")
{gp3.style.display = "block";}
}
else
{
gp3.style.display = "none";
}
// gp4
if (document.form4.categorie.value == 4)
{
if (gp4.style.display == "none")
{gp4.style.display = "block";}
}
else
{
gp4.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;
}
if(document.form4.phone.value == "") {
alert("Votre telephone ?");
document.form4.phone.focus();
return false;
}
if(document.form4.email.value == "") {
alert("Votre email ?");
document.form4.email.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;
}
}
// 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>
</head>
<body>
<form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">
<div class="control-group">
<label class="control-label" for="categorie"><strong >Categorie * :</strong ></label>
<div class="controls">
<select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()" class='formchamp'>
<option value="0">--Choississez--</option>
<option style='background-color:#f2f2f2' disabled id='cat71' >-- EMPLOI --</option>
<option value='1' id='cat33'>Offres d'emploi</option>
<option style='background-color:#f2f2f2' disabled id='cat1' >-- VEHICULES --</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 class="control-group">
<label class="control-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 class="control-group">
<label class="control-label" for="objet"><strong >Type d'annonce* :</strong></label>
<div class="controls">
<select id="type_annonce" name="type_annonce" class="">
<option value="">--Choississez--</option>
<option value=1>Offres</option>
<option value=2>Demandes</option>
<option value=3>Location</option>
</select>
</div>
</div>
<div class="control-group">
<label id="sujet_for" class="control-label" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label>
<label id="sujet_for_offre_demploi" class="control-label" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label>
<div class="controls">
<input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" >
</div>
</div>
<div class="control-group">
<label id="message" class="control-label" style="display:block;" for="message"><strong ><?php //echo $label722 ;?>Texte de l'annonce * :</strong></label>
<label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong ><?php //echo $label722 ;?>Description du poste * :</strong></label>
<div class="controls">
<textarea id="message" name="message" rows="7" cols="60"></textarea>
</div>
</div>
<!-- groupe 2-->
<div id="groupe2" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div id="marque" class="control-group">
<label id="marque_for" class="control-label" for="marque"><strong >Marque </strong></label>
<select name="marque" id="marque" >
<option value="" selected>«Choisissez»</option>
<optgroup label="Marques Courantes">
<option value="Audi" >Audi </option>
<option value="Bmw" >Bmw </option>
<option value="Citroen" >Citroen </option>
<option value="Fiat" >Fiat </option>
<option value="Ford" >Ford </option>
<option value="Mercedes" >Mercedes </option>
<option value="Opel" >Opel </option>
<option value="Peugeot" >Peugeot </option>
<option value="Renault" >Renault </option>
<option value="Volkswagen" >Volkswagen </option>
</optgroup>
<optgroup label="Autres Marques">
<option value="Abarth" > Abarth </option>
<option value="Aleko" > Aleko </option>
<option value="Alfa Romeo" > Alfa Romeo </option>
<option value="Alpina" > Alpina </option>
<option value="Aro" > Aro </option>
<option value="Artega" > Artega </option>
<option value="Aston Martin" > Aston Martin </option>
<option value="Autobianchi" > Autobianchi </option>
<option value="Auverland" > Auverland </option>
<option value="Bentley" > Bentley </option>
<option value="Bertone" > Bertone </option>
<option value="Bluecar Groupe Bollore" > Bluecar Groupe Bollore </option>
<option value="Buick" > Buick </option>
<option value="Cadillac" >Cadillac </option>
<option value="Chevrolet" > Chevrolet </option>
<option value="Chrysler" > Chrysler </option>
<option value="Corvette" > Corvette </option>
<option value="Dacia" > Dacia </option>
<option value="Daewoo" > Daewoo </option>
<option value="Daihatsu" > Daihatsu </option>
<option value="Dangel" > Dangel </option>
<option value="De La Chapelle" > De La Chapelle </option>
<option value="Dodge" > Dodge </option>
<option value="Donkervoort" > Donkervoort </option>
<option value="Ds" > Ds </option>
<option value="Ferrari" > Ferrari </option>
<option value="Fisker" > Fisker </option>
<option value="Gme" > Gme </option>
<option value="Honda" > Honda </option>
<option value="Hummer" > Hummer </option>
<option value="Hyundai" > Hyundai </option>
<option value="Infiniti" > Infiniti </option>
<option value="Isuzu" > Isuzu </option>
<option value="Iveco" > Iveco </option>
<option value="Jaguar" > Jaguar </option>
<option value="Jeep" > Jeep </option>
<option value="Kia" > Kia </option>
<option value="Lada" > Lada </option>
<option value="Lamborghini" > Lamborghini </option>
<option value="Lancia" > Lancia </option>
<option value="Land Rover" > Land Rover </option>
<option value="Lexus" > Lexus </option>
<option value="Lotus" > Lotus </option>
<option value="Mahindra" > Mahindra </option>
<option value="Maruti" > Maruti </option>
<option value="Maserati" > Maserati </option>
<option value="Mastretta" > Mastretta </option>
<option value="Maybach" > Maybach </option>
<option value="Mazda" > Mazda </option>
<option value="Mclaren" > Mclaren </option>
<option value="Autres" > Autres </option>
</optgroup>
</select>
</div>
<div class="control-group">
<label class="control-label" for="model_year" ><strong >?>Année Modèle </strong></label>
<div class="controls">
<select name="model_year" id="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="carburant"><strong >Carburant *</strong></label>
<div class="controls">
<select name="carburant" id="carburant" >
<option value="" selected>«Choisissez»</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 class="control-group">
<label id="model_for" class="control-label" for="modele"><strong >Modèle *</strong></label>
<div class="controls">
<input name="model" id="model" type="text" value="">
</div></div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="boite_vitesse"><strong >Boite de vitesse *</strong></label>
<div class="controls">
<select name="boite_vitesse" id="boite_vitesse">
<option value="" selected>«Choisissez»</option>
<option value="manuelle" >Manuelle</option>
<option value="automatique" >Automatique</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="kilometrage"><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>
<!-- 3 groupe-->
<div id="groupe3" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div class="control-group">
<label class="control-label" for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" id="model_year">
<option value="" selected>«Choisissez»</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="km"><strong >Kilometrage: km *</strong></label>
<div class="controls">
<input name="km" type="text" value="" >
</div></div>
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="cylindre"><strong >Cylindrée: cm³ </strong></label>
<div class="controls">
<input name="cylindre" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe3--> </div>
<!--groupe4--> <div id="groupe4" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div class="control-group">
<label class="control-label" for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="km"><strong ><?php //echo $label1015 ;?>Kilometrage: km</strong></label>
<div class="controls">
<input name="km" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe4--></div>
<div id="groupe33" style="display:none">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div class="control-group">
<label class="control-label" for="Type_de_contrat"><strong ><?php //echo $label1015 ;?>Type de contrat *</strong></label>
<div class="controls">
<select name="Type_de_contrat" id="Type_de_contrat">
<option value="0" selected>«Choisissez»</option>
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Intérim</option><option value="4" >Indépendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label"><strong ><?php //echo $label711 ;?> Travail à :</strong ></label>
<label class="radio inline">
<input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span>
</label>
<label class="radio inline">
<input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span>
</label>
</div>
<div class="control-group">
<label class="control-label"><strong ><?php //echo $label711 ;?> Vous souhaitez recevoir les candidatures via :</strong ></label>
<label class="radio inline">
<input type="radio" name="adreply_type" value="1" checked="checked">
<span class="text mrl">Votre email</span>
</label>
<label class="radio inline">
<input type="radio" name="adreply_type" value="2" >
<span class="text">Votre site web</span>
</label>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="Secteur_d_activite"><strong ><?php //echo $label1015 ;?>Secteur d'activité </strong></label>
<div class="controls">
<select name="jobfield" id="jobfield" class="">
<option value="0" selected>«Choisissez»</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ôtellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >Médecine/Santé</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >Télécom/Internet/Médias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="Fonction"><strong ><?php //echo $label1015 ;?>Fonction </strong></label>
<div class="controls">
<select name="jobduty" id="jobduty" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Administration/Services généraux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilité/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction Générale</option><option value="16" >Etudes/Recherches/Ingénieries</option><option value="15" >Formation/Education</option><option value="7" >Hô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édecine/Santé</option><option value="12" >Ménage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Opérations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >Sécurité/Défense/Gardiennage</option><option value="14" >Services à la personne</option><option value="20" >Service Client/Accueil</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="experience"><strong ><?php //echo $label1015 ;?>Expérience * </strong></label>
<div class="controls">
<select name="jobexp" id="jobexp">
<option value="0" selected>«Choisissez»</option>
<option value="1" >0 à 2 ans</option><option value="3" >2 à 5 ans</option><option value="5" >5 ans et plus</option>
</select>
</div></div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="jobstudy"><strong ><?php //echo $label1015 ;?>Niveau d'études *</strong></label>
<div class="controls">
<select name="jobstudy" id="jobstudy" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Sans diplôme</option><option value="2" >BEPC/BET</option><option value="3" >Employé/Ouvrier spécialisé/Bac</option><option value="4" >Technicien/Employé/Bac+2</option><option value="5" >Agent de maîtrise/Bac+3</option><option value="6" >Ingénieur/Cadre/Bac+5 ou plus</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="adreply_redirect"><strong ><?php //echo $label1015 ;?>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;"><?php //echo $label1033;?>Vos informations</h3>
</div><!--fin div style categ-->
<div class="control-group">
<label class="control-label" for="prenom"><strong >Votre prénom * :</strong></label>
<div class="controls">
<input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="email"><strong >Votre téléphone * :</strong></label>
<div class="controls">
<input type="text" id="phone" name="phone" value="" maxlength="10" autocomplete="off" class="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email"><strong >Votre email * :</strong></label>
<div class="controls">
<input type="text" id="email" name="email" value="" autocomplete="off" class="" >
</div>
</div>
</div>
</div>
</div>
<div class="container">
<p class="text-right"><strong>Champs obligatoires *</strong></p>
<hr>
<div class="control-group">
<label class="control-label" for="valider">Valider</label>
<input type="submit" name="envoye" value="Valider" class="btn btn-success">
<input type="reset" value="Initialiser" class="btn btn-info">
</div>
</form>
</body>
</html>