驗證不會在模態上觸發

Question

我想驗證兩個字段（reason和details）在作爲模態加載的窗體上。 （驗證工作如果inputs沒有加載模態內）。我不確定背後的原因是什麼。

我將通過webservice提交，因此我使用$（「＃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。