Modal ne se cache pas

J'ai un problème avec un modèle Bootstrap. Je dois le cacher si la validation de formulaire est vraie, et écrire des erreurs si ce n'est pas le cas. Mais quand je clique sur le bouton, la fonction de soumission n'est pas exécutée du tout. J'ai essayé d'ajouter onsubmit=validateForm() mais cela n'a pas fonctionné non plus.Modal ne se cache pas

Des idées?

function validateForm() { 
 
    if (Math.floor(Math.random() * 2) == 1) { 
 
     console.log('success'); 
 
     $('#modal-form').modal('hide'); 
 
     return; 
 
    } 
 
    console.log('failure'); 
 
    return false; 
 
} 
 

 
$(document).ready(function() { 
 
    console.log('ready') 
 
    $('#submit-btn').submit(function (event) { 
 
     event.preventDefault(); 
 
     let $form = this, 
 
      $submit = $form.find('button[type="submit"]'), 
 
      email = $form.find('#email'), 
 
      pwd = $form.find('#pwd'); 
 

 
     if (validateForm(email, pwd, text)) { 
 
      $submit.text('wrong'); 
 
      return false; 
 
     } 
 
     $submit.attr("disabled", true); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Form</title> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js" 
 
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    <script src="index.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <button type="button" class="click-btn btn btn-info btn-lg" data-toggle="modal" data-target="#modal-form">Click 
 
    </button> 
 
    <div class="modal fade" id="modal-form" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Form</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form id="form" class="form-horizontal"> 
 
      <div class="form-group"> 
 
      <label for="email">Email address:</label> 
 
      <input type="email" class="form-control" id="email"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="pwd">Password:</label> 
 
      <input type="password" class="form-control" id="pwd"> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button id="submit-btn" type="submit" class="btn btn-default">Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Source

2017-10-14 8txra

Il suffit de modifier deux choses

1-Choisissez une balise de formulaire pour écouter soumettre événement

$(document).ready(function() { 
    console.log('ready') 
    $('#form').submit(function (event) { 
     event.preventDefault(); 
     console.log('submitted') 
    }); 
});

2-Entourez tous les éléments de formulaire ainsi présenter bouton dans le <form> ta g

<form id="form" class="form-horizontal"> 
      <div class="modal-body"> 
       <div class="form-group"> 
       <label for="email">Email address:</label> 
       <input type="email" class="form-control" id="email"> 
       </div> 
       <div class="form-group"> 
       <label for="pwd">Password:</label> 
       <input type="password" class="form-control" id="pwd"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
      <button id="submit-btn" type="submit" class="btn btn-default">Submit</button> 
      </div> 
     </div> 
</form>

Source

2017-10-14 18:04:42

Merci beaucoup! :) cela fonctionne parfaitement) – 8txra

S'il vous plaît faire upvoting chaque fois que vous trouvez des réponses utiles –

Modal ne se cache pas

Répondre

Questions connexes