Mon script ne fonctionne pas

Fermé
elonaenjy - 7 mars 2020 à 16:47
elonaenjy Messages postés 17 Date d'inscription samedi 7 mars 2020 Statut Membre Dernière intervention 11 janvier 2021 - 8 mars 2020 à 15:02
Bonjour,



Configuration: Windows / Chrome 80.0.3987.132

Je travaille sous wampserver
J'ai créé un formulaire et les scripts javascript ont pour objectif de faire les vérifications de saisie.
Voilà mon code
Dans la balise <head>

<script> (function surligne(champ, erreur){
if(erreur)
champ.style.backgroundColor = "#fba";
else
champ.style.backgroundColor = "";
}) </script>


<script>(function verifNom(champ) {
if(champ.value.length < 2 || champ.value.length > 25) {
surligne(champ, true);
return false;}
else {
surligne(champ, false);
return true;}
}) </script>

<script>(function verifMail(champ){var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
if(!regex.test(champ.value)){
surligne(champ, true);
return false;}
else {
surligne(champ, false);
return true;}
})</script>

Rien de très extraordinaire. Et voilà mon formulaire :
<form id="feedbackForm" class="text-center" action="Controleur/envoiMail.php" method="post">
<div class="form-group">
<label for="dest"> Destinataire </label>
<SELECT class="form-control" name="dest" id=dest>
<option value=""> Choisissez un destinataire en fonction de votre pays de résidence </option>
<option value="IDAC">Afrique - IDAC</option>
<option value="IDA">Autres - IDA</option>
</SELECT>
</div>

<div class="form-group">
<label for="name">Nom</label>
<input type="text" class="form-control" id="name" name="name" onblur="verifNom(this)" placeholder="Nom" aria-describedby="nameHelp">
<span id="nameHelp" class="form-text text-muted" style="display: none;">Veuillez saisir votre Nom.</span>

<label for="name">Prénom</label>
<input type="text" class="form-control" id="name" name="firstname" placeholder="Prénom" aria-describedby="nameHelp">
<span id="nameHelp" class="form-text text-muted" style="display: none;">Veuillez saisir votre prénom.</span>
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="email" class="form-control" id="email" name="email" onblur="verifMail(this)" placeholder="Adresse Email" aria-describedby="emailHelp">
<span id="emailHelp" class="form-text text-muted" style="display: none;">Veuillez saisir une adresse e-mail valide.</span>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea rows="10" cols="100" class="form-control" id="message" name="message" placeholder="Message" aria-describedby="messageHelp"></textarea>
<span id="messageHelp" class="form-text text-muted" style="display: none;">Entrez votre message.</span>
</div>
<button type="submit" value="Ok" class="btn btn-primary btn-lg"> Envoyer</button>
</form>


La mise en place des scripts n'a rien changé. Dans la console pas d'erreur.

Au secours
A voir également:

6 réponses

jordane45 Messages postés 38178 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mai 2024 4 667
7 mars 2020 à 18:18
Bonjour

commence par déplacer des scripts en bas de ta page avant la fin de ton body.

Ensuite ajoutes-y des console.log
Pour t'assurer que ton code rentre bien dedans...
une fois fait merci de nous partager le code modifié ainsi qu'une capture d'écran de ta console JavaScript une fois que tu as essayé de saisir du texte dans ton chant.

.
0
elonaenjy Messages postés 17 Date d'inscription samedi 7 mars 2020 Statut Membre Dernière intervention 11 janvier 2021
7 mars 2020 à 18:59
j'ai fait les modifications demandées. Voici mon script modifié :
<script>(function verifNom(champ) {
console.log("verif nom : ");
console.log(champ);

if(champ.value.length < 2 || champ.value.length > 25) {
surligne(champ, true);
return false;}
else {
surligne(champ, false);
return true;}
}) </script>

Or dans la log je ne vois rien
Mais il semble m'indiquer des erreurs que je ne peux pas voir
0
jordane45 Messages postés 38178 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mai 2024 4 667
Modifié le 7 mars 2020 à 19:13
Il y a 2 erreurs et 3 warning... Ne penses tu pas que ca pourrait expliquer tes soucis ??
0
elonaenjy Messages postés 17 Date d'inscription samedi 7 mars 2020 Statut Membre Dernière intervention 11 janvier 2021 > jordane45 Messages postés 38178 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mai 2024
7 mars 2020 à 19:18
si tout à fait mais je ne sais pas comment voir le détail. Je sais seulement que deux sont dans l'index mais comme l'index n'a rien à voir avec la page contact, je ne comprends pas. Pour ino j'ai développé le site en php objet avec du bootstrap. Je me demanais si j'avais déplacé les scripts au bon endroit :
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="Contenu/Bootstrap-4.3.1/js/jquery-3.3.1.min.js"></script>
<script src="Contenu/Bootstrap-4.3.1/js/jqueryIDA.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Contenu/Bootstrap-4.3.1/js/popper.min.js"></script>
<script src="Contenu/Bootstrap-4.3.1/js/bootstrap-4.3.1.js"></script>

<script> (function surligne(champ, erreur){
console.log
if(erreur)
champ.style.backgroundColor = "#fba";
else
champ.style.backgroundColor = "";
}) </script>


<script>(function verifNom(champ) {
console.log("verif nom : ");
console.log(champ);

if(champ.value.length < 2 || champ.value.length > 25) {
surligne(champ, true);
return false;}
else {
surligne(champ, false);
return true;}
}) </script>

<script>(function verifMail(champ){var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
if(!regex.test(champ.value)){
surligne(champ, true);
return false;}
else {
surligne(champ, false);
return true;}
})</script>



</body>
</html>
0
Amyglo > elonaenjy Messages postés 17 Date d'inscription samedi 7 mars 2020 Statut Membre Dernière intervention 11 janvier 2021
7 mars 2020 à 22:01
Salut,
il y a des erreurs il faut donc les corriger...
Un seul oubli de virgule ou point virgule mal placé et plus rien ne pourra fonctionner dans un programme.
Hors dés les premières lignes dans votre dernier code je voit des erreurs pour l'écriture de votre test conditionnel et un console.log vide et sans les parenthèses...

Il n'y a pas à chercher plus loin, une seule faute et tout est faux.
ça ne garantit pas que votre programme fonctionne correctement(pour le but et fonctionnalités voulues) mais ça garantit déjà que ça ne peut par marcher.
Sur la capture d'écran que vous montrez il y a une fléche à c$oté de error, e,n cliquant dessus vous devriez pourvoir voir quelle ligne est concernée. Ce n'est pas toujours fiable et vous pouvez simplement relire les quelques lignes de votre programme pour trouver où est l'erreur; une méthode simple aussi est de placer les lignes soupçonnées de contenir une mauvaise syntaxe en commentaires pour isoler l'erreur.


Je ne comprends pas non plus pourquoi l'ensemble de vos scripts sont placés dans des parenthésés. Cela permet de faire un contexte qui est privé, inaccessible depuis l'extérieur. Vous ne pourrez utiliser aucune valeur de l'extérieur (ou utiliser les fonctions que vous y définissez)ni rien renvoyer comme semble l'indiquer vos fonctions. Tout reste dans la TemporalDeadZone sauf la valeur de retour mais pour cela il faut une valeur de retour et donc que votre script fonctionne correctement.
0
elonaenjy Messages postés 17 Date d'inscription samedi 7 mars 2020 Statut Membre Dernière intervention 11 janvier 2021
8 mars 2020 à 08:45
Bonjour Amyglo

Un grand merci pour ta réponse. Mon souci est qu'en cliquant sur la petite flèche je ne vois pas plus le détail. :-(


Pour info, voici le contenu de mon fichier index.php :

<?php

require 'Controleur/Routeur.php';

$routeur = new Routeur();
$routeur->routerRequete();


Peux tu m'aider ?
0
jordane45 Messages postés 38178 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mai 2024 4 667
8 mars 2020 à 10:54
Bonjour,

Déjà, merci d'utiliser les balises de code pour poster ton code sur le forum
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite : il faudrait que tu nous montres le code source "généré" de ta page.
Pour cela : Affiche ta page dans ton navigateur web, puis fais un CTRL + U afin d'en afficher le code source.
Colles nous ensuite ce code source (COMPLET) ici.


0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
elonaenjy Messages postés 17 Date d'inscription samedi 7 mars 2020 Statut Membre Dernière intervention 11 janvier 2021
8 mars 2020 à 13:40
Bonjour Jordan
Je viens de regarder le lien avec les balises de code. Je finis de corriger l'erreur générée par des include qui ne fonctionnait pas : visiblement Bootstrap était installé de manière incomplète sur le site.
Je reviens vers vous dés que j'ai réglé les pbs de premier niveau car en effet les fichiers javascript étaient concernés....
0
elonaenjy Messages postés 17 Date d'inscription samedi 7 mars 2020 Statut Membre Dernière intervention 11 janvier 2021
8 mars 2020 à 15:02
Bonjour

Pb résolu. J'ai suivi tous vos conseils. Dans ma console, il n'y a désormais plus aucun message d'erreur, et j'ai remis les scripts javascript ou j'ai retiré les (). Et ça fonctionne. Ca me surligne bien la ligne en rouge par contre ça ne me remet pas le curseur sur la ligne et ça ne m'affiche pas de message d'erreur. Si vous acceptez de m'aider je suis preneuse, sinon je vais fouiller un peu.... :-)
Pour rappel mon code complet
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Institut Docteur Angelique</title>
        <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="Contenu/Bootstrap-4.3.1/dist/css/bootstrap.css" />  
    <link rel="stylesheet" type="text/css" href="Contenu/Bootstrap-4.3.1/css/styleinstitut.css" />
<script> function surligne(champ, erreur){
	 console.log("je passe dans surligne");
          if(erreur)
             champ.style.backgroundColor = "#fba";
          else
             champ.style.backgroundColor = ""; 
          } </script>

<script> function verifNom(champ) {
console.log("verif nom : ");
	console.log(champ);
   
				if(champ.value.length < 2 || champ.value.length > 25) {
 				surligne(champ, true);
 				return false;}
				else {
 				surligne(champ, false);
 				return true;}
		} </script>

<script> function verifMail(champ){var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
          if(!regex.test(champ.value)){
             surligne(champ, true);
             return false;}
          else {
             surligne(champ, false);
             return true;}
		} </script>
    

  </head>
  <body> 
      <header class="bgSizeCover" >
      <div class="jumbotronheader">
        <div class="container">
          <div class="row">
              <div class="col-3 col-xl-2">
				 <img  alt="logo" style="width: 190px; height: 190px; border-radius: 100px" src="Vue/images/logo.jpg">
          		 <a href="https://www.tipeee.com/institut-docteur-angelique" target="_blank"><img style="padding-top: 5px" src="Vue/images/soutien.jpg" alt="Soutenir l'Institut Docteur Angelique" width="210" height="55" ></a>
              </div>	
              <div class="col-7 col-xl-7" style="padding-left: 60px">
              	<h1 class="text-center">INSTITUT DOCTEUR ANGELIQUE</h1>
              	<h2 class="text-center">Institut privé de philosophie et de théologie catholique</h2>
              	<h6 class="text-center citation font-italic"> Science et foi doivent marcher ensemble comme deux affectionnées<br> (St François de Sales)</h6>
              </div>
 			  <div class="col-3 offset-xl-1 col-xl-2 align-self-end">	
 			  	
					<a href="https://www.facebook.com/arnaud.dumouch.9"><img src="Vue/images/facebook.jpg" style="border-radius: 15px" width="75" height="75" > </a>
					<a href="https://www.youtube.com/user/aDumouch1/featured"><img src="Vue/images/youtube.jpg"  style="border-radius: 15px" alt="Chaine Catholique Arnaud Dumouch"width="75" height="75" > </a>
				
				<div><a href="https://www.tipeee.com/institut-docteur-angelique" target="_blank"><img style="width: 210px; height: 60px; margin-top: 0.5rem" src="Vue/images/espacepriere.jpg" alt="Offrez vous un moment de coeur � coeur avec le Seigneur" width="210" height="55" ></a>
       		  	</div>
       		  </div>		   
      	</div>
      </div>
      </div>
    </header>

    <nav class="navbar navbar-expand-lg navbar-light bg-light-institut">
      <a class="navbar-brand" href="#">Menu</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"> <a class="nav-link" href="index.php" >Accueil </a> </li>
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Théologie </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=TH&idTheme=TH010" >Premiers pas Théologie Catholique</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=TH&idTheme=TH020" >Théologie Dogmatique et Théologie Morale</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=TH&idTheme=TH030" >Théologie Mystique</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=TH&idTheme=TH040" >Pastorale</a>
					<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=TH&idTheme=TH050" >Théologie Biblique</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=TH&idTheme=TH060" >Eschatologie</a>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Saints </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=ST&idTheme=ST010">Introduction</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=ST&idTheme=ST020" >Apparition de la Vierge</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=ST&idTheme=ST030" >Saints et témoins de l'histoire</a>
            		
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Philosophie </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH010">Premiers Pas en Philosophie</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH020" >Introduction à la Philosophie</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH025" >Philosophie Réaliste</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH030" >Philosophie du travail</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH040" >Philosophie morale</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH050" >Philosophie politique</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH060" >Philosophie de la matière</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH070" >Philosophie du vivant</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH080" >Métaphysique</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH090" >Sagesse Philosophique et théologie naturelle</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH095" >Autres cours de Philosophie</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=PH&idTheme=PH100" >Annexes</a>
            		
            </div>
          </li>


          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Actualités </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=AC&idTheme=AC010">Vie de l'église</a>
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=AC&idTheme=AC020">Connaissances et débats avec les autres religions</a>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bibliothèque </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            		<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=BI&idTheme=BI010"> Contes</a>
          			<a class="dropdown-item" href="index.php?action=sstheme&idPedagogie=BI&idTheme=BI010"> Le livre sur les anges : "Michel, Gabriel, Raphael"</a>
           		
            </div>
          </li>


          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Autres sites </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            		<a class="dropdown-item" href="http://docteurangelique.free.fr/accueil.html" >Site Docteur Angelique</a>
            		<a class="dropdown-item" href="http://eschatologie.free.fr/accueil.html" >Site Eschatologie</a>
            		<a class="dropdown-item" href="http://https://premierspascatholiques.wordpress.com/" >Premiers Pas Catholiques</a>
            </div>
          </li>

          <li class="nav-item"> <a class="nav-link" href="index.php?action=contact">Contact</a> </li>
          
        </ul>        
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Saisir" aria-label="Saisir votre texte">
          <button class="btn btn-info my-2 my-sm-0" type="submit">Rechercher</button>
        </form>
      </div>
      </nav>
      
         
    <div id="contenu">
                <section>
    <div class="container">
	    <div class="row">
          	<div class="col-lg-8 col-md-6 col-sm-12 text-center">
	 			<h2>Formulaire de contact</h2>    
	    	</div>
	    </div>
	    <div class="row">
	     <div class="col-lg-4 col-md-6 col-sm-12">
              <strong> Si votre pays de résidence est en Afrique, vous dépendez du recteur Brice Noah. Pour les autres pays de résidence, vous relevez du recteur Arnaud Dumouch
 		  	  </strong>       
          </div>
          <div class="col-lg-8 col-md-6 col-sm-12">
	 		            <div class="jumbotron">
            	<div class="row text-center">
                	<div class="text-center col-12">
                		<form id="feedbackForm" class="text-center" action="Controleur/envoiMail.php" method="post">
                  			<div class="form-group">
                                <label for="dest"> Destinataire </label>
                                <SELECT class="form-control" name="dest" id=dest required>
                                		<option value=""> Choisissez un destinataire en fonction de votre pays de résidence </option>
										 <option value="IDAC">Afrique - IDAC</option>
										 <option value="IDA">Autres - IDA</option>
								</SELECT>
                            </div>
             		
                			<div class="form-group">
                    			<label for="name">Nom</label>
                                <input type="text" class="form-control" id="name" name="name" onblur="verifNom(this)" placeholder="Nom" aria-describedby="nameHelp" required>
                                <span id="nameHelp" class="form-text text-muted" style="display: none;">Veuillez saisir votre Nom.</span>
            
                                <label for="name">Prénom</label>
                                <input type="text" class="form-control" id="name" name="firstname" placeholder="Prénom" aria-describedby="nameHelp" required>
                                <span id="nameHelp" class="form-text text-muted" style="display: none;">Veuillez saisir votre prénom.</span>
                 			 </div>
                  			<div class="form-group">
                                <label for="email">E-Mail</label>
                                <input type="email" class="form-control" id="email" name="email" onblur="verifMail(this)" placeholder="Adresse Email" aria-describedby="emailHelp" required>
                                <span id="emailHelp" class="form-text text-muted" style="display: none;">Veuillez saisir une adresse e-mail valide.</span>
                            </div>
                            <div class="form-group">
                                <label for="message">Message</label>
                                <textarea rows="10" cols="100" class="form-control" id="message" name="message" placeholder="Message" aria-describedby="messageHelp" required></textarea>
                                <span id="messageHelp" class="form-text text-muted" style="display: none;">Entrez votre message.</span>
                            </div>
		                   <button type="submit" value="Ok" class="btn btn-primary btn-lg"> Envoyer</button>
               		   </form>
              </div>
            </div>
          </div>
          </div>
          </div>
          </div>
  </section>
            </div> <!-- #contenu -->
             
        <footer class="footerSizeCoverInstitut">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <p>Copyright © Institut Docteur Angelique. All rights reserved.</p>
          </div>
        </div>
      </div>
    </footer>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="Contenu/Bootstrap-4.3.1/js/jquery-3.3.1.min.js"></script>
    <script src="Contenu/Bootstrap-4.3.1/js/jqueryIDA.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    
    <!--  <script src="Contenu/Bootstrap-4.3.1/js/bootstrap-4.3.1.js"></script>  -->
    <script src="Contenu/Bootstrap-4.3.1/dist/js/bootstrap.js"></script>
    <script src = " https://unpkg.com/@popperjs/core@2 "></script > 

	    		


  </body>
</html>
0