jQuery로이 Boostrap 모달의 유효성을 검사하는 법

Question

부트 스트랩 모달에서 "필수"경고를 얻으려고하므로 입력 필드에 유효한 데이터가 있기 전에 제출할 수는 없지만 닫히지 않은 경우에만 제출하십시오 그것. 아마도 어떤 아이디어가 빠졌을 것입니까? https://codepen.io/anon/pen/wPaKPR?editors=1011

<button type="submit" data-toggle="modal" data-target="#addSomething">Open modal</button> 

<div id="addSomething" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 
     <div class="modal-body"> 
     <form role="form" id="newModalForm"> 
      <b>Add name:</b> 
      <input type="text" placeholder="Name" id="pName" name="pName" required> 
      <hr> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" id="btnCloseIt" class="btn btn-default" data-dismiss="modal">Close</button> 
     <input type="submit" id="btnSaveIt" class="btn btn-default" data-dismiss="modal" value="Add"> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

$(function() { 

    $("#newModalForm").validate({ 
    rules: { 
     pName: { 
     required: true, 
     minlength: 8 
     }, 
     action: "required" 
    }, 
    messages: { 
     pName: { 
     required: "Please enter some data", 
     minlength: "Your data must be at least 8 characters" 
     }, 
     action: "Please provide some data" 
    } 
    }); 
}); 

Answer 1

당신의 HTML이 시도 이것은 내가 정확히 변경 않은 것을 볼 수있는 데 문제 work..however 보인다

<button type="submit" data-toggle="modal" data-target="#addSomething">Open modal</button> 

    <div id="addSomething" class="modal fade"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      </div> <form role="form" id="newModalForm"> 
      <div class="modal-body"> 

       <b>Add name:</b> 
       <input type="text" placeholder="Name" id="pName" name="pName" required> 

       <hr> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" id="btnCloseIt" class="btn btn-default" data-dismiss="modal">Close</button> 
       <input type="submit" id="btnSaveIt" class="btn btn-default" value="Add"> 
      </div> 
      </form> 
     </div> 
     </div> 
    </div>