유효성 검사가 모달에서는 트리거되지 않습니다.

Question

모달로로드되는 폼에서 두 개의 필드 (reason 및 details)의 유효성을 검사하려고합니다. (inputs이 모달 안에로드되지 않은 경우 유효성 검사가 작동 함). 나는 그 이유가 무엇인지 모르겠습니다.

웹 서비스를 통해 제출하므로 $ ("# save")를 사용하여 유효성 검사를 트리거 한 다음 서버에 데이터를 보냅니다.

내 스크립트 코드 :

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('form').validate({ 
      rules: { 
       reason: { 
        minlength: 5, 
        maxlength: 50, 
        required: true 
       }, 
       details: { 
        minlength: 5, 
        maxlength: 999, 
        required: true 
       } 
      }, 
      highlight: function (element) { 
       $(element).closest('.form-group').addClass('has-error'); 
      }, 
      unhighlight: function (element) { 
       $(element).closest('.form-group').removeClass('has-error'); 
      }, 
      errorElement: 'span', 
      errorClass: 'help-block', 
      errorPlacement: function (error, element) { 
       if (element.parent('.form-group').length) { 
        error.insertAfter(element.parent()); 
       } else { 
        error.insertAfter(element); 
       } 
      } 
     }); 

     //save new item 
     $("#save").click(function() { 
      if ($('form').valid() == true) { 
       //actions here 
      } 
     }); 
    }); 

    $(function() { 
     $("#addEntry").click(function() { 
      $('#myModal').modal('show'); 

     }); 
    }); 

</script> 

내 HTML

<input id="addEntry" type="button" value="Add new medical entry" class="btn btn-default" /> 


    <div id="myModal" class="modal fade theindex" role="dialog"> 
     <form> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 

      <div class="modal-content"> 
       <div class="modal-header btn-success"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Add new medical entry</h4> 
       </div> 
       <div class="modal-body"> 

         <h4>Reason</h4> 
         <div class="divDrop"> 
          <div class="form-group "> 
           <input class="form-control" id="txtReason" name="reason" type="text" /> 
          </div> 
         </div> 
         <h4>Details</h4> 
         <div class="divDrop"> 
          <div class="form-group"> 
           <textarea class="form-control" rows="5" id="txtDetails" name="details"></textarea> 
          </div> 
         </div> 

       </div> 

       <%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%> 
       <div class="input-group col-xs-12"> 
        <h4 class="modal-title leftPad1">Add prescription</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="divCateogyx"> 
         <div class="divDrop"> 
          <div class="input-group col-xs-12"> 
           <span class="input-group-addon"> 
            <i class="glyphicon glyphicon-search"></i> 
           </span> 
           <input class="form-control" id="txtMedicine" placeholder="search medicine by name, substance, or package" name="medicine" type="text" /> 
          </div> 
          <div class="col-xs-12 h5" id="divSelectedMeds"> 
          </div> 
         </div> 
        </div> 

        <br /> 
        <br /> 
       </div> 

       <div class="modal-header"> 
        <%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%> 
        <h4 class="modal-title">Add media</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="divCateogyx"> 
         <div class="divDrop"> 
          <div id="accordion5" class="panel-group accordion_5"> 
           <div class="panel panel-default"> 
            <div class="panel-heading"> 
             <h4 class="panel-title"> 
              <a data-parent="#accordion5" data-toggle="collapse" class="collapsed" href="#item5_2"><span class="fa accordion_icon"></span>Images, reports, or videos </a> 
             </h4> 
            </div> 
            <div id="item5_2" class="panel-collapse collapse"> 
             <div class="panel-body"> 
              <dnn:DnnFilePicker ID="dnnFilePicker1" runat="server"></dnn:DnnFilePicker> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

        <br /> 
        <br /> 
       </div> 

       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" id="save">Save</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 

      </div> 

     </div> 
      </form> 
    </div> 

Answer 1

당신이 모달을 보여 직후에 당신의 .validate() 방법을 이동하십시오. 이렇게하면 유효성 검사를 초기화 할 때 양식이 존재합니다.

$("#addEntry").click(function() { 
    $('#myModal').modal('show'); // show the form 
    $('#myForm').validate({   // initialize validation on the form 
     rules: { .... 
     .... 
    }); 
}); 

또한, 당신의 pastbin 모달의 또 다른 form 외부를 보여주고 있기 때문에, 당신은 모달 내에서 form을 대상으로보다 구체적인 선택을 사용해야합니다.