Bug d'un formulaire [Résolu/Fermé]

Signaler
Messages postés
76
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
15 juin 2020
-
Messages postés
76
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
15 juin 2020
-
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

Messages postés
29567
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 septembre 2020
2 785
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://www.commentcamarche.net/faq/48399-php-gestion-des-erreurs-debogage-et-ecriture-du-code



Messages postés
76
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
15 juin 2020

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>
Messages postés
76
Date d'inscription
vendredi 17 octobre 2014
Statut
Membre
Dernière intervention
15 juin 2020

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