フィールドからのブートストラップモーダルウィンドウを非表示にする方法

Question

フォームデータを送信し、jqueryを使用して応答を取得してモーダルウィンドウに表示しようとしています。すべてのフォームフィールドが必要なので、私はattb requiredを使用しています。クリック送信データはjqueryに送信して応答を取得する必要があります。いずれかのフィールドが空の場合は、エラーが表示されます。今問題はモーダルウィンドウを切り替えることです。以下の私のコードを見てください。

<form name="newjoin" method="post" enctype="multipart/form-data" id="JoiningConform"> 

<label for="sponsorid">Name: <span class="req">*</span></label> 
<input type="text" id="name" name="name" placeholder="Your Name" class="form-control" tabindex="1" required /> 

<button type="submit" data-toggle="modal" href="#myModal" class="button btn btn-primary btn-large">Register</button> 


<div id="myModal" class="modal fade in"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 

       <div class="modal-header"> 
        <a class="btn btn-default pull-right" data-dismiss="modal"><span class="fa fa-remove"></span></a> 
        <h4 class="modal-title">CONGRALUATIONS</h4> 
       </div> 
       <div class="modal-body"> 
        <h4>Text in a modal</h4> 
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> 
        <div id="modal-div"></div> 
       </div> 

      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dalog --> 
    </div><!-- /.modal --> 

私のjqueryのは、どのフィールドが、それは成功応答のみモーダルウィンドウが表示されます後にのみエラーを示すべき空の場合、私はボタンをクリックした場合における

$('form#JoiningConform').on('submit',function(event){ 
    event.preventDefault() 

    $.ajax({ 
     type:'post', 
     url:'testmodal.php', 
     data:$('form#JoiningConform').serialize(), 
     success: function(response){ 
      if(!response){ 
      $('#modal-div').html(response).modal('show'); 
      } 
      } 
     }); 
    }); 

私の懸念があります。

例の画像

Answer 1

は... First Nameフィールドを検証し、これを試してみてください。

$('form#JoiningConform').on('submit',function(event){ 
    event.preventDefault() 
    var name = $('#name').val(); 
    if(name == ""){ 
    alert('error message'); 
    return false; 
    }else{ 
    $.ajax({ 
     type:'post', 
     url:'testmodal.php', 
     data:$('form#JoiningConform').serialize(), 
     success: function(response){ 
      $('#myModal').modal('show'); 
      $('#modal-div').html(response); 
     } 
    }); 
    } 
});