Forums Développement Multimédia

Aller au contenu

- - - - -

verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php

CODE TUTO

12 réponses à ce sujet

#1 charlydar

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 07 October 2016 - 10:46 AM

Bonjour, je suis toujours à la recherche d'une solution à mon code JS.
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:
ci joint le code réduit:

<!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>--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>
<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="">--Choississez--</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>Choisissez</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>Choisissez</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>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>
<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>Choisissez</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>Choisissez</option>
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Intrim</option><option value="4" >Indpendant/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>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" >Htellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >Mdecine/Sant</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >Tlcom/Internet/Mdias</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>Choisissez</option>
<option value="1" >Administration/Services gnraux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilit/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction Gnrale</option><option value="16" >Etudes/Recherches/Ingnieries</option><option value="15" >Formation/Education</option><option value="7" >Htellerie/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" >Mdecine/Sant</option><option value="12" >Mnage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Oprations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >Scurit/Dfense/Gardiennage</option><option value="14" >Services 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>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>
<div>
<label for="jobstudy"><strong >Niveau d'
études *</strong></label>
<div>
<select name="jobstudy" id="jobstudy" class="select">
<option value="0" selected>Choisissez</option>
<option value="1" >Sans diplme</option><option value="2" >BEPC/BET</option><option value="3" >Employ/Ouvrier spcialis/Bac</option><option value="4" >Technicien/Employ/Bac+2</option><option value="5" >Agent de matrise/Bac+3</option><option value="6" >Ingnieur/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>
<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>


#2 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 07 October 2016 - 11:29 AM

Bonjour.

Citation

cette fonction a pour rôle de vérifier si le visiteur a rempli les champs obligatoires masqués qui s'affichent…
???
:?
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#3 charlydar

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 07 October 2016 - 12:04 PM

La fonction vérifie le contenu des champs obligatoires affichés après un choix de la catégorie. Il y'a un souci au niveau de la catégorie "voiture", la fonction ne vérifie pas tous les champs obligatoires et elle déclenche l'envoie du formulaire à la page de traitement après avoir vérifié quelques champs. Je crois que le test du code suffit pour se rendre compte... :roll:

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2530 messages

Posté 08 October 2016 - 10:11 AM

Salut,

Voici comment analyser et debugger ce genre d'anomalies

Sur tous les navigateurs modernes, tu disposes d'outils pour développeurs qui te permettent de placer des points d'arrêts dans le code et également voir le contenu de chaque variable

donc, j'ai pris ton code et ai ouvert les outils pour dev de Chrome

j'ai ensuite mis un point d'arrêt dans la fonction de vérification du formulaire

En regardant le contenu des champs testés, on constate que le champ km n'est pas reconnu
important : si l'inspecteur avait trouvé le champ vide, il afficherait

Citation

" "


Image attachée: mediabox.png

Donc le pb vient de là

Tu utilises alors l'inspecteur pour voir l'id du champ qui d'après le code js doit être #km

et tu constates que l'id du HTML est #kilometrage

Et voilà

Bon code
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2530 messages

Posté 08 October 2016 - 10:28 AM

En complément, je me permet quelques propositions d'améliorations

Tout d'abord, si la majorité des champs sont obligatoires, voir tous, il est inutile d'indiquer obligatoire sur tous les champs

En effet, il ne faut indiquer que les exceptions, pas la normalité

Ainsi, si tu as un champ qui n'est pas obligatoire, tu ajoutes à côté de celui-ci : facultatif

naturellement, l'utilisateur va comprendre que puisque les autres champs ne sont pas facultatifs, de fait il sont obligatoires

Ensuite sur le code

Plutôt que de tester tous les champs en les recherchant par leur nom, tu pourrais utiliser une classe css, par exemple .required

Ensuite, la fonction verif_formulaire ( )
ne ferait que rechercher les champs possédant cette classe pour vérifier qu'une valeur à bien été saisie

avantage : tu ne t'occupes plus de mettre des #id et tu peux ajouter supprimer facilement des champs sans aucun impact sur ta fonction JS puisqu'il suffit que le champ possède la classe .required pour être vérifié

exemple

    function verif_formulaire () {
            // permet de vérifier que les champs visibles de type input[type=text] sont bien renseignés
            document.querySelectorAll('.required').forEach(function (el){
                   
                    if (el.offsetParent !== null){ // on ne contrôle que les champs visibles
                            if (el.type === 'text') { // si c'est un input type text
                                    if(el.value === ''){
                                            console.log(el.id + ' doit être renseigné');
                                    } else {
                                            console.log(el.id + ' est bien renseigné à la valeur ' + el.value);
                                    }
                            }
                    }
            });
 

Voilà quelques pistes, n'hésite pas si tu as d'autres questions
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#6 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2530 messages

Posté 08 October 2016 - 10:30 AM

A noter que les navigateurs récents interprètent l'attribut required, il suffit de l'ajouter pour avoir une gestion par le navigateur des champs obligatoires

exemple

<input type="text" name="kilometrage" required>
 

doc : https://developer.mo...uired_attribute
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#7 charlydar

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 08 October 2016 - 13:41 PM

Ah ça ! Il fallait y penser, vraiment merci de la réponse.


C’est un formulaire qui pourrait avoir 2000 lignes de codes. Ces erreurs peuvent échapper à mon contrôle.


Merci de m&#39;avoir rappelé l&#39;utilisation de la console, car je négligeais son utilisation.


Maintenant, il faut exploiter ces pistes. Car, il y&#39;a une facilité dans la maintenance du code.


Mais, je remarque que vous avez parlé  et proposé une piste  de solution pour la fonction &quot;verfi_formulaire&quot;.


Je pourrais dire que la fonction affiche_autres() peut rester ? Puisque, il y&#39;a rien à signaler.


Je n&#39;hésiterai pas si j&#39;ai d&#39;autres questions....



#8 charlydar

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 08 October 2016 - 14:45 PM

je commence les modifications, la foncti :verif_formulaire()
devient:

function verif_formulaire () {
                    // permet de vérifier que les champs visibles de type input[type=text] sont bien renseignés
                    document.querySelectorAll('.required').forEach(function (el){
                                 
                                    if (el.offsetParent !== null){ // on ne contrôle que les champs visibles
                                                    if (el.type === 'text' || el.type ==='textarea') { // si c'est un input type text ou textarea ?
                                                                    if(el.value === ''){
                                                                                    console.log(el.id + ' doit être renseigné');
                                                                    } else {
                                                                                    console.log(el.id + ' est bien renseigné à la valeur ' + el.value);
                                                                    }
                                                    }
                                    }
                    });
 

concernent les text area ?

#9 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2530 messages

Posté 08 October 2016 - 17:05 PM

Exactement puisque la propriété "value" retourne bien la valeur pour le textarea comme pour l'input de type text
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#10 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 08 October 2016 - 18:20 PM

Voir le messagecharlydar, le 07 October 2016 - 12:04 PM, dit :

La fonction vérifie le contenu des champs obligatoires affichés après un choix de la catégorie. Il y'a un souci au niveau de la catégorie "voiture", la fonction ne vérifie pas tous les champs obligatoires et elle déclenche l'envoie du formulaire à la page de traitement après avoir vérifié quelques champs. Je crois que le test du code suffit pour se rendre compte... :roll:

J'avais bien compris, je voulais juste souligner d'un clin d'œil la contradiction qu'il y a dans la question : comment l'utilisateur pourrait-il remplir un champ masqué (obligatoire ou non) ?
:smile:
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#11 charlydar

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 10 October 2016 - 09:56 AM

Merci de votre aide !
Cela me donne de la force pour aller jusqu'au bout du projet.
car, j'étais paniqué et je viens de finir ma formation en javascript il y'a deux mois.
je crois vais revenir vers vous pour l'integration de la géolocalisation sur site web.
Pour l'instant, je suis entrain d'étudier en lisant certains tutoriaux...

#12 charlydar

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 10 October 2016 - 09:58 AM

Voir le messagecharlydar, le 10 October 2016 - 09:56 AM, dit :

Merci de votre aide !
Cela me donne de la force pour aller jusqu'au bout du projet.
car, j'étais paniqué et je viens de finir ma formation en javascript il y'a deux mois.
je crois que je vais revenir vers vous pour l'integration de la géolocalisation sur site web.
Pour l'instant, je suis entrain d'étudier en lisant certains tutoriaux...


#13 charlydar

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 10 October 2016 - 09:59 AM

Voir le messagecharlydar, le 10 October 2016 - 09:58 AM, dit :






Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP