验证不会在模态上触发

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。