モーダルが非表示にならない

ブートストラップモデルに問題があります。フォームの検証が真であればそれを隠す必要があり、そうでなければエラーを書く必要があります。しかし、ボタンをクリックすると、サブミット機能はまったく実行されません。私はonsubmit=validateForm()を追加しようとしましたが、どちらもうまくいきませんでした。モーダルが非表示にならない

アイデア？

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>

出典

2017-10-14 8txra

ただ、二つのこと

イベント

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

提出するとともに、すべてのフォーム要素を2-囲みを提出することを聴くためのフォームタグを1-選択を変更<form>タのボタン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>

出典

2017-10-14 18:04:42

ありがとうございます！ :)これは完璧に動作します） – 8txra

役に立つ回答が見つかるたびにupvotingしてください –

モーダルが非表示にならない

答えて

関連する問題