如何隱藏Bootstrap模式窗口，如果從字段無效

Question

我想發送表單數據並使用jquery獲取響應並將其顯示在模式窗口中。每個表單域都是必需的，所以我使用attb所需的。點擊提交數據應該提交給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

嘗試...... 首先驗證名稱字段。

$('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); 
     } 
    }); 
    } 
});