Sujet Précédent Sujet Suivant

Bug d'un formulaire

Résolu/Fermé
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021 - Modifié le 19 juin 2019 à 17:35
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021 - 19 juin 2019 à 18:44
Bonjour,
J'utilise bootstrap 4 et Jquery Validate dans ce code, le formulaire qui bug est a l’intérieur d'un modal. 

<!-- Jquery validate de l'ajout -->
<script type="text/javascript">
  $().ready(function() {
    $("#formInscr").validate({
      rules:{
        mail_inscr:{
          required:true,
          email:true,
        },
        mdpass:{
          required:true,
        },
      },

      messages:{
        mail_inscr:{
          required: "<?php echo $lang['err_vide']; ?>",
          email:"<?php echo $lang['err_email']; ?>",
        },
        mdpass : {
          required:"<?php echo $lang['err_vide']; ?>",
        },
      },
    });
  });
</script>

<div id="modal1" class="modal">
  <div class="modal-content modal1">
    <!-- button de fermeture -->
    <a class="close" onclick="closeModal(1)">×</a>

    <!-- formulaire a l'interieur -->
    <fieldset class="text-center h-100 px-3">
      <legend class="modal-legend"><?php echo $lang['ajouter_uti']; ?></legend>
      <form id="formInscr" action="controleur/ajout_uti.php?token=<?php echo $_SESSION['token']; ?>" method="POST">
      <div class="row mt-3">
          <div class="col-12 col-md-6">
            <label><?php echo $lang['uti_mail']." : "; ?></label>
          </div>
          <div class="col-12 col-md-6">
            <input type="text" id="mail_inscr" class="w-100 h-30px">
          </div>
        </div>

        <div class="row my-2 h-60px">
          <div class="col-12 col-md-6">
            <label><?php echo $lang['uti_pass']." : "; ?></label>
          </div>
          <div class="col-12 col-md-6">
            <input type="password" id="mdpass" class="w-100 h-30px">
          </div>
        </div>

        <div class="row my-2 pt-3">
          <div class="col-6">
            <input type="checkbox" name="chk_chef" value="1"> Chef
          </div>
          <div class="col-3 col-md-6 text-center">
            <input type="submit" name="btn_ajout" value="Ajouter">
          </div>
          <div class="col-3 col-md-6"></div>
        </div>
      </form>
    </fieldset>
  </div>
</div>


EDIT : Correction des balises de code pour avoir la coloration syntaxique !

Le bug c'est que la code Jquery validate ne marche pas quand je valide le formulaire, et quand (dans Firefox), je fait click droit --> inspecter l'élément sur ma page internet contenant le formulaire, j'obtient : 

<form id="formInscr" action="controleur/ajout_uti.php?token=5d0a3dbb58afc" method="POST" novalidate="novalidate"></form>


Avec mes input en dessou du </form> (le </form> que j'ai codé a disparut).

merci d'avance de votre aide

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 juin 2019 à 17:42
Bonjour,

Pour commencer, merci de poster ton code avec la coloration syntaxique à l'avenir.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, as tu des erreurs dans la CONSOLE de ton navigateur ?
Est-ce que ton formulaire s'affiche correctement dans firefox si tu retires le code JS concernant le validate ?
Peux tu nous montrer le code "généré" de ta page ? ( en affichant le SOURCE depuis ton navigateur internet ( CTRL + u ) )

As tu bien activé l'affichage des erreurs PHP sur ta page..... juste au cas où .... ?
Voir ici : https://forums.commentcamarche.net/forum/affich-37584947-php-gestion-des-erreurs-debogage-et-ecriture-du-code



0
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021
19 juin 2019 à 18:26
Aucune erreurs Javascript dans la console, grace au texte source de la page j'ai remarqué que j'avait oublier de fermer une table et le </form> est maintenant a sa place.
Par contre le code Javascript ne fonctionne toujour pas alors qu'il me semble correct.

J'ai activer l'affichage des erreurs PHP, et rien a signaler.

Voici le code source : 

<!DOCTYPE html>
<html>
<head>
  <title>Admin</title>
  <!-- logo dans le menu internet-->
<link rel="icon" href="../image/logo.png" type="image/gif" />

<!-- lien vers des feuille de styles et autres -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- lien vers bootstrap -->
<link rel="stylesheet" href="../lib/bootstrep-4.0.0-dist/css/bootstrap.css">
<script src="../lib/bootstrep-4.0.0-dist/js/jquery3.3.1.js"></script>
<script src="../lib/bootstrep-4.0.0-dist/js/bootstrap-min4.13.js"></script>

<!-- jquery validate -->
<script src="../lib/jquery/jquery-1.12.0.min.js"></script>
<script src="../lib/jquery/jquery.validate.min.js"></script>
<script src="../lib/jquery/additionnal-method.js"></script>

<!-- fonction pour ouvrir/fermer un modal -->
<script src="modal.js"></script>

<!-- mes css -->
<link rel="stylesheet" href="css/style.css">

</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="container-fluid d-flex justify-content-end">
  <nav class="navbar navbar-expand">
    <div class="row">

      <!-- Links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="index.php?page=gest_utilisateur">Gestion des utilisateurs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.php?page=langues">Langues</a>
        </li>
        <li class="nav-item link">
          <a class="nav-link" onclick="closeApplication()">Deconnexion</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../index.php?page=content_accueil" target="_blanc">Aller au WebSite</a>
        </li>
      </ul>

    </div>
  </nav>
</div>
    </div>
    <!-- liste des utilisateurs -->
<div class="row mt-5">
  
  <table class='mx-auto'>
  <tr>
  <th>Type</th>
  <th>Nom</th>
  <th>Mail</th>
  <th class='link underline'><a onclick=openModal(1) >Ajouter</a></th>
  <th class=text-danger></th>
  </tr>
  <tr>
    <td>membre</td>
    <td> </td>
    <td></td>
    <td><a href=index.php?page=suppr_uti&uti=&token=5d0a4e012a79b onclick='return confirm("Êtes-vous sur de vouloir supprimer cet utilisateur ?")'>Supprimer</a></td>
    <td><a href=index.php?page=modif_uti&uti=&token=5d0a4e012a79b>Modifier</a></td>
    </tr><tr>
    <td>membre</td>
    <td>toto toto</td>
    <td>toto@g</td>
    <td><a href=index.php?page=suppr_uti&uti=toto@g&token=5d0a4e012a79b onclick='return confirm("Êtes-vous sur de vouloir supprimer cet utilisateur ?")'>Supprimer</a></td>
    <td><a href=index.php?page=modif_uti&uti=toto@g&token=5d0a4e012a79b>Modifier</a></td>
    </tr></table></div>

<!-- Formulaire d'ajout/modification d'utilisateurs et sa verification avec Jquery validate-->
<!-- Jquery validate de l'ajout -->
<script type="text/javascript">
  $().ready(function() {
    $("#formInscr").validate({
      rules:{
        mail_inscr:{
          required:true,
          email:true,
        },
        mdpass:{
          required:true,
        },
      },

      messages:{
        mail_inscr:{
          required: "Veuillez remplir ce champ",
          email:"Veuillez rentrer un email valide",
        },
        mdpass : {
          required:"Veuillez remplir ce champ",
        },
      },
    });
  });
</script>

<div id="modal1" class="modal">
  <div class="modal-content modal1">
    <!-- button de fermeture -->
    <a class="close" onclick="closeModal(1)">×</a>

    <!-- formulaire a l'interieur -->
    <fieldset class="text-center h-100 px-3">
      <legend class="modal-legend">Ajouter un utilisateur</legend>
      <form id="formInscr" action="controleur/ajout_uti.php?token=5d0a4e012a79b" method="POST">
      <div class="row mt-3">
          <div class="col-12 col-md-6">
            <label>Mail : </label>
          </div>
          <div class="col-12 col-md-6">
            <input type="text" id="mail_inscr" class="w-100 h-30px">
          </div>
        </div>

        <div class="row my-2 h-60px">
          <div class="col-12 col-md-6">
            <label>Mot de passe : </label>
          </div>
          <div class="col-12 col-md-6">
            <input type="password" id="mdpass" class="w-100 h-30px">
          </div>
        </div>

        <div class="row my-2 pt-3">
          <div class="col-6">
            <input type="checkbox" name="chk_chef" value="1"> Chef
          </div>
          <div class="col-3 col-md-6 text-center">
            <input type="submit" name="btn_ajout" value="Ajouter">
          </div>
          <div class="col-3 col-md-6"></div>
        </div>
      </form>
    </fieldset>
  </div>
</div>
  </div>
</body>
</html>
0
regitraz Messages postés 89 Date d'inscription vendredi 17 octobre 2014 Statut Membre Dernière intervention 30 mai 2021
19 juin 2019 à 18:44
je n'ai toujours pas compris mon erreur, mais un copier coller depuis un autre formulaire qui marche correctement, et tout recommencer a zero a fonctionné.
Merci
0

Discussions similaires

Problème Facebook rencontre
Margalle -
Jpf -

17 réponses
Problème musiques étranges sur story instagram
somnorun -
SN -

21 réponses
Iptv beug
leogauthier15 -
bazfile -

1 réponse
Problème avec "Facebook Rencontre"
xouxou77 -
4.Kat3ur -

7 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses