ブートストラップ：入力が入力されていない間にモーダルが閉じる

Question

私はブートストラップを使用してモーダルを作成しています。必要な入力が満たされていないか、入力の要件が満たされていない間にモーダルクロージングを防止する必要があります。 入力の要件をどのように実現できますか？ RegExpのようなもの？

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel">Adding a user</h4> 
      </div> 
      <form name="userAdding"> 
       <div class="modal-body"> 
        <input type="text" required placeholder="Name" id="inputName"> 
        <br> 
        <input type="text" required placeholder="Username" id="inputUsername"> 
        <br> 
        <input type="email" required placeholder="Email" id="inputEmail"> 
        <br> 
        <input type="text" placeholder="Street" id="inputStreet"> 
        <br> 
        <input type="text" placeholder="Suite" id="inputSuite"> 
        <br> 
        <input type="text" placeholder="City" id="inputCity"> 
        <br> 
        <input type="number" placeholder="Zipcode" id="inputZipcode"> 
        <br> 
        <input type="number" placeholder="Lat" id="inputLat"> 
        <br> 
        <input type="number" placeholder="Lng" id="inputLng"> 
        <br> 
        <input type="number" placeholder="Phone" id="inputPhone"> 
        <br> 
        <input type="text" placeholder="Website" id="inputWebsite"> 
        <br> 
        <input type="text" required placeholder="Companyname" id="inputCompname"> 
        <br> 
        <input type="text" placeholder="Catchphrase" id="inputCatchphrase"> 
        <br> 
        <input type="text" placeholder="bs" id="inputBs"> 
       </div> 
      </form> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addUser()">Submit</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

送信ボタンからデータ・解任を削除してから、私はメールのみのためにここに提供してきました。あなたはこのように行うことができ、すべてのレクリエーション：あなたの最初の要件については

function addUser(){ 
      var email = document.getElementById('inputEmail').value; 
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
      if(re.test(email)){ 
       $('#myModal').modal('hide'); 
       console.log(email + " Success"); 
      }else{ 
       console.log(email + " Failed") 
      } 
     } 

Answer 2

（モーダルを閉じていない）、次のことができます。 1. 2.閉じるボタンを無効にするには、ヘッダー内の閉じるボタンを削除すべての入力が満たされるまでフッターに挿入します。後者は、複数の可能性について

：

• は、デフォルトでボタンを無効にし、入力のchangeイベントに機能的に結合します。その中で、すべての入力をチェックし、それに応じてボタンの状態を設定します。

• addUser()で、入力の有効性を確認してください。それらが正しくない場合は、this stackoverflowに記載されている解決策の1つを使用して、終了イベントをキャンセルします。

Answer 3

function addUser() 
{ 
    $("form").validate({ 
     showErrors: function (errorMap, errorList) { 
      var errors = this.numberOfInvalids(); 
      if (errors) { 
       return false; 
      } 
     }); 
} 

アドユーザーにコードを追加した検証発生がある場合に非表示にし、その規制モデルとして機能します。