필드에서 유효하지 않은 경우 부트 스트랩 모달 창 숨기기

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

하는이 시도 ... 먼저 이름 필드를 확인합니다.

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