jquery 验证忽略了我的所有规则

Question

我有以下表格和 js，我不确定它为什么停止工作。

$('#reporting').validate({
  debug: true,

  rules: {
   inptfnamer: {
    required: true
   },
   inptlnamer: {
    required: true
   },
   inptemailr: {
    required: true,
    email: true
   },
   inptnumberr: {
    required: true,
    number: true
   },
   r_summary: {
    required: true
   },
   r_description: {
    required: true
   },
   r_requestor_domain: {
    required: true
   },
   r_requestor_domain_other: {
    required: {
     depends: function()
     {
      var rdom = $('select[id="r_requestor_domain"]', '#reporting').val();
      if(rdom == 100)
      {
       return true;
      }
      else{
       return false;
      }
     }
    }
   },
   r_request_type: {
    required: true
   },   
   r_project_related: {
    required: true
   },
   r_activity_code: {
    required: {
     depends: function()
     {
      var acode = $('select[id="r_project_related"]', '#reporting').val();
      if(acode == 'proj_2')
      {
       return true;
      }
      else{
       return false;
      }      
     }     
    }
   },
   r_project_code: {
    required: {
     depends: function()
     {
      var pcode = $('select[d="r_project_related"]', '#reporting').val();
      if(pcode == 'proj_2')
      {
       return true;
      }
      else{
       return false;
      }      
     }     
    }
   },   
   r_frequency_id: {
    required: true
   },
   r_data_source_id: {
    required: true
   },
   r_output_id: {
    required: true
   },
   r_preferred_dist_method_id: {
    required: true
   }

  },
  showErrors: function(errorMap, errorList) {
   console.log(errorMap);
   console.log(errorList);
   $.each( this.successList , function(index, value) {
    $(value).popover('hide');
   });
   $.each( errorList , function(index, value) { 
    console.log(value.message);
     var _popover = $(value.element).popover({
     trigger: 'manual',
     placement: 'top',
     content: value.message,
     template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"></div></div></div>'
    });
     _popover.data('bs.popover').options.content = value.message;
     $(value.element).popover('show');
   });
  },
  submitHandler: function (form) {
   console.log(form);
   /*$.ajax({
   type: "POST",
   url: "requestportal_ajax.php",  
   data: "action=requestportal&"+$('form.reporting').serialize(),
   success: function(msg){
    $("#form-reporting").modal('hide');
    //location.reload();
    $("#notification").html(msg);
   },
   error: function(){
    $("#form-reporting").modal('hide');
    $("#notification").html(msg);
   }
   });*/
  }  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>



<!-- Modal Reporting -->
 <div id="form-reporting" class="modal fade" role="dialog">
   <div class="modal-dialog">
 
     <!-- Modal content-->
     <div class="modal-content">
    <!-- Header -->
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h2 class="modal-title"><i class="fa fa-area-chart fa-fw"></i> Reporting Request</h2>
       </div>
         <form class="reporting" name="reporting" id="reporting">
     <!-- Body -->
     <div class="modal-body">
     
      <input type="hidden" name="reporting_request[ticket_type]" value="reporting">
      
      <!-- Contact Details Section Heading -->
      <h4 class="page-header" style="margin-top: 0;">Requestor Details</h4>
      
      <div class="row-fluid">
       <!-- First Name -->
       <div class="span6">
        <div class="input-group has-feedback">
         <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
         <input type="text" class="form-control inptfname" name="user[inptfname]" id="inptfnamer" placeholder="First Name" />
        </div>
       </div>
       
       <!-- Last Name -->
       <div class="span6">
        <div class="input-group has-feedback" class="span6">
         <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
         <input type="text" class="form-control inptlname" name="user[inptlname]" id="inptlnamer" placeholder="Last Name" />
        </div>
       </div>
      </div><br/>
      
      <div class="row-fluid">
      
       <!-- Email -->
       <div class="span6">
        <div class="input-group has-feedback">
         <span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
         <input type="text" class="form-control inptemail" name="user[email]" id="inptemailr" placeholder="Email" />
        </div>
       </div>
       
       <!-- Tel -->
       <div class="span6">
        <div class="input-group has-feedback">
         <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
         <input type="text" class="form-control inptnumber" name="user[phone]" id="inptnumberr" placeholder="Contact Number" />
        </div>
       </div>
       
      </div><br>

      <!-- Request Details Section Heading -->
      <h4 class="page-header" style="margin-top: 5px;">Request Details</h4>
      
      <!-- Request Summary -->
      <div class="input-group has-feedback">
       <span class="input-group-addon"><i class="fa fa-pencil-square-o fa-fw"></i></span>
       <input type="text" class="form-control" name="reporting_request[summary]" id="r_summary" placeholder="Summary"/>
      </div><br>
      
      <!-- Request Description -->
      <div class="input-group has-feedback">
       <span class="input-group-addon"><i class="fa fa-pencil-square-o fa-fw"></i></span>
       <textarea class="form-control" name="reporting_request[description]" id="r_description" placeholder="Description"></textarea>
      </div><br>
      
      <div class="row-fluid">
      
       <div class="span6">
        <!-- Requester Domain -->
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-users fa-fw"></i></span>
         <select class="form-control" name="reporting_request[requestor_domain]" id="r_requestor_domain" >
          <option selected> -- Select Requester Domain -- </option>
         </select>
        </div>
        <div class="form-group">
         <input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[requestor_domain_other]" id="r_requestor_domain_other" />
        </div>
        
        <!-- Project Related -->
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-gbp fa-fw"></i></span>
         <select class="form-control" name="reporting_request[project_related]" id="r_project_related">
          <option disabled selected>-- Select Project Related --</option>
          <option value="No">No (OPEX)</option>
          <option value="Yes">Yes (CAPEX)</option>
         </select>
        </div>
        <br>
        
        <!-- Project Related, if yes change in js -->
        <div id="codes1">
         <div class="form-group">
          <input class="form-control" type="text" placeholder="Activity Code" name="reporting_request[activity_code]" id="r_activity_code">
         </div>
         <div class="form-group">
          <input class="form-control" type="text" placeholder="Project Code" name="reporting_request[project_code]" id="r_project_code">
         </div>
        </div>
        
        
        <!-- data source -->
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-database fa-fw"></i></span>
         <select class="form-control" name="reporting_request[data_source_id]" id="r_data_source_id">
          <option selected> -- Select Data Source -- </option>
         </select>
        </div>
        <!-- <div class="form-group">
         <input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[data_source_other]" id="r_data_source_id_other" >
        </div>-->
        
        
       </div><!-- //.span6 -->
       
       
       <div class="span6">
        <!-- Request Type is report type -->
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-bar-chart fa-fw"></i></span>
         <select class="form-control" name="reporting_request[request_type]" id="r_request_type">
          <option selected> -- Select Report Type -- </option>
         </select>
        </div><br>
        <!-- <div class="form-group">
         <input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[request_type_other]" id="r_request_type_other" />
        </div>-->
        
        <!-- frequency -->
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-clock-o fa-fw"></i></span>
         <select class="form-control" name="reporting_request[frequency_id]" id="r_frequency_id">
          <option selected> -- Select Frequency Required -- </option>
         </select>
        </div><br>
        <!-- <div class="form-group">
         <input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[frequency_other]" id="r_frequency_id_other" >
        </div>-->
        
        
        <!-- output -->
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-file-code-o fa-fw"></i></span>
         <select class="form-control" name="reporting_request[output_id]" id="r_output_id">
          <option selected> -- Select Output Format -- </option>
         </select>
        </div>
        <!-- <div class="form-group">
         <input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[output_other]" id="r_output_id_other" >
        </div>-->
       
       </div><!-- //.span6 -->
      
      </div><!-- //.row-fluid -->
      <br>
      
      <!-- reciepents -->
      <div class="input-group has-feedback">
       <span class="input-group-addon"><i class="fa fa-send-o fa-fw"></i></span>
       <input class="form-control" type="text" placeholder="CC" name="reporting_request[report_recepients]" id="r_report_recepients">
      </div><br>
      
      <!-- preferred_dist_method_id -->
      <div class="input-group">
       <span class="input-group-addon"><i class="fa fa-truck fa-fw"></i></span>
       <select class="form-control" name="reporting_request[preferred_dist_method_id]" id="r_preferred_dist_method_id">
        <option selected> -- Select Distribution Method -- </option>
       </select>
      </div>
      <!--<div class="form-group">
       <input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[preferred_dist_method_other]" id="r_preferred_dist_method_id_other" >
      </div>-->
    
    </div><!-- //.modal-body -->

    <!-- Footer -->
    <div class="modal-footer">
     <input class="btn btn-success" type="submit" value="Submit Reporting Request" id="repsubmit">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </form>
   </div>
   </div>
 </div>

Answer 1

您的规则对象的目标是 inptfnamer:

$('#reporting').validate({
    rules: {
        inptfnamer: { // <-
            required: true
        }, ....

但是这个字段的name不是inptfnamer:

<input name="user[inptfname]" id="inptfnamer" ....

在.validate()方法中，您必须使用字段的name。由于 name 包含方括号，您必须将其括在引号内：

$('#reporting').validate({
    rules: {
        'user[inptfname]': { // <-  must be the NAME attribute
            required: true
        }, ....

对所有字段重复。

演示：http://jsfiddle.net/qq1e0pt1/

jquery 验证忽略了我的所有规则

jquery validate is ignoring all my rules

jquery

jquery-validate