Bug d'un formulaire

Résolu
regitraz Messages postés 89 Date d'inscription   Statut Membre Dernière intervention   -  
regitraz Messages postés 89 Date d'inscription   Statut Membre Dernière intervention   -
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
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

Iptv beug
leogauthier15 -
bazfile -

1 réponse
Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
Problème IPTV SMARTER
eneleh49 -
glandu -

1 réponse
Smart IPTV met un temps fou à charger depuis que je suis passé à la fibre
Ancaro13 -
glandu -

3 réponses
Bug de chaîne IPTV
GeraltDeRiv13 -
bazfile -

1 réponse