Bug d'un formulaire

Résolu

regitraz Messages postés 103 Statut Membre -
regitraz Messages postés 103 Statut Membre - 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

Afficher la suite

1 réponse

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 831

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

regitraz Messages postés 103 Statut Membre

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>

regitraz Messages postés 103 Statut Membre

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

Bug d'un formulaire

1 réponse

Discussions similaires

Newsletters