表单字段数组使用jQuery单独验证，但表单不会提交

Question

这是我的第一篇文章，所以请善待。 ： - ）

我有一个包含多个数组和其他项目的表单。某些表单字段可以多次输入，这就是它们是数组的原因。我正在使用Jquery 1.11.1和jquery验证。我只需要两个数组，具体取决于下拉列表中的选项。如果没有填写或选择正确的项目，我会收到我期望的所有错误消息。并且，当所有项目都完成后，所有错误消息都将消失。

问题是，表单不会提交。我认为它与“条件”数组有关，因为我有另一种形式，数组都是必需的，它工作正常。

这让我疯狂了一段时间 - 足够长的时间在这里发布问题。我在这里查看过很多帖子，并没有找到任何有我确切问题的人。

我希望有人可以提供帮助。

这是HTML表单（JS和验证包含在表单之前）：

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ggsghpcc.sgt-inc.com/cmct/js/jquery.validate.js"></script>

<script language="JavaScript">
  numComps = 1;
  function showCampaigns(id)  {
  var mission1 = "missionOne";
  var mission2 = "missionTwo";
  var compNumber = id.slice(10);
  var selection = document.getElementById(id).value;
  if (selection == "missionOne")  {
     document.getElementById(selection + "_" + compNumber).style.display = "block";
     document.getElementById(mission2 + "_" + compNumber).style.display = "none";}

  if (selection == "missionTwo")  {
     document.getElementById(selection + "_" + compNumber).style.display = "block";
     document.getElementById(mission1 + "_" + compNumber).style.display = "none";  }
 }
$(document).ready(function()  {

  var u_campaignMissionOne = new Array;
  var u_campaignMissionTwo = new Array;
  var u_dataset = new Array;
  var u_mission = new Array; 
  var FS = 1;
  var x = 2;
  var u_variable = new Array;
  var u_intIndex = new Array;


  $("#submitData").validate({
  rules: {
      'u_variable[]': {
          required: true
      },
      'u_intIndex[]': {
          required: true,
          min: 1
      }, 
      'u_mission[]': {
          required: true
      },
      'u_campaignMissionOne[]': {
          required: function(element) {
              var setNumber = $(element).attr('id');
              var setNum = "comp" + setNumber.slice(21);
              var missionNum = "u_mission_" + setNumber.slice(21);
                return $((document.getElementById(missionNum).value) == 'MissionOne');
                    }  
      },
      'u_campaignMissionTwo[]': {
          required: function(element) {
              var setNumber = $(element).attr('id');
              var setNum = "comp" + setNumber.slice(21);
              var missionNum = "u_mission_" + setNumber.slice(21);
            return $((document.getElementById(missionNum).value) == 'MissionTwo');
                    }  
      },
      'u_dataSet[]': {
          required: true
      }
  },
  messages: {
      'u_variable[]': {
          required:"  Please enter a variable",
      },
      'u_intIndex[]': {
          required:"   Please enter a time interval",
      },
      'u_mission[]': {
          required:"   Please select a mission"
      },
      'u_campaignMissionOne[]': {
          required:"   Please select a Mission One campaign"
      },
      'u_campaignMissionTwo[]': {
          required:"   Please select a Mission Two campaign"
      },
      'u_dataSet[]': {
          required:"   Please select a data set"
      }
  },
  wrapper: 'span',
  errorPlacement: function (error, element) {
  error.css({'padding-left':'10px','padding-top':'0.5em','padding-bottom':'2px', 'color': 'red', 'font-style':'italic', 'font-size':'14px', 'width': '330px', 'float': 'right'});

    error.insertAfter(element);
  }
  });
 });

</script>
<h2>Submit data</h2>
<div class="full-width-content-item">

<form id="submitData" action="alert.php" method="post" enctype="multipart/form-data">
<div>
 <div id="formStuff" style="margin:0; padding:0; display:inline;">
 <div style="height:40px; width:100%;"></div>
<div id="comp1">
 <fieldset><legend>Data</legend>
 <div id="intervalIndex">
        <div class="fieldLabel"><label class="control-label">Time index*</label></div>
        <input type="text" size="10" id="u_intIndex_1" name="u_intIndex[]" placeholder="Integer value > 0" value=""/>
 </div><!--end intervalIndex--><br clear="right" />
 <div id="variable">
        <div class="fieldLabel"><label class="control-label">Variable*</label></div>
        <input type="text" id="u_variable_1" name="u_variable[]" class="u_variable" value="" />
 </div><!--end variable--><br clear="right" />
 <div>
    <div class="fieldLabel"><label class="control-label">Mission*</label> </div>
        <select name="u_mission[]" id="u_mission_1" onchange="showCampaigns(this.id);">
            <option value="">Please select</option>
            <option value="missionOne"  >Mission One</option>
            <option value="missionTwo"  >Mission Two</option>
        </select>
 </div><br clear="right" />
 <div class="campaign"> 
     <div class="missionOne" id="missionOne_1" style="height:3.0em; display:none;">
        <div class="fieldLabel"><label class="control-label">Mission One Campaign*</label></div>
            <select name="u_campaignMissionOne[]" id="u_campaignMissionOne_1" >
                <option value="">Please select</option>                        
                <option value="Campaign-MissionOne-1" >Campaign-MissionOne-1</option>
                <option value="Campaign-MissionOne-2" >Campaign-MissionOne-2</option>
                <option value="Campaign-MissionOne-3" >Campaign-MissionOne-3</option>
                <option value="Campaign-MissionOne-4" >Campaign-MissionOne-4</option>
                <option value="Campaign-MissionOne-5" >Campaign-MissionOne-5</option>

            </select>
    </div>
     <div class="missionTwo" id="missionTwo_1" style="display:none;">
        <div class="fieldLabel"><label class="control-label">Mission Two Campaign*</label></div>
            <select name="u_campaignMissionTwo[]" id="u_campaignMissionTwo_1">
                <option value="">Please select</option>                        
                <option value="Campaign-MissionTwo-1" >Campaign-MissionTwo-1</option>
                <option value="Campaign-MissionTwo-2" >Campaign-MissionTwo-2</option>
                <option value="Campaign-MissionTwo-3" >Campaign-MissionTwo-3</option>
                <option value="Campaign-MissionTwo-4" >Campaign-MissionTwo-4</option>
                <option value="Campaign-MissionTwo-5" >Campaign-MissionTwo-5</option>
            </select>                    
     </div>
 </div><!--end class=campaign--><br clear="right" />
 <div>
    <div class="fieldLabel"><label class="control-label">Data set*</label>  </div>
        <select name="u_dataSet[]" id="u_dataSet_1">
            <option value="">Please select</option>
            <option value="dataSet1"  >dataSet 1</option>
            <option value="dataSet2"  >dataSet 2</option>
            <option value="dataSet3"  >dataSet 3</option>
            <option value="dataSet4"  >dataSet 4</option>
            <option value="dataSet5"  >dataSet 5</option>
        </select>
 </div><br clear="right" />
 </fieldset></div><!--end comp1 div-->
 <div style="height:40px; width:100%;"></div>
 <div id="comp2">
 <fieldset><legend>Data</legend>
 <div id="intervalIndex">
        <div class="fieldLabel"><label class="control-label">Time index*</label></div>
        <input type="text" size="10" id="u_intIndex_2" name="u_intIndex[]" placeholder="Integer value > 0" value=""/>
 </div><!--end intervalIndex--><br clear="right" />
 <div id="variable">
        <div class="fieldLabel"><label class="control-label">Variable*</label></div>
        <input type="text" id="u_variable_2" name="u_variable[]" value="" />
 </div><!--end variable--><br clear="right" />
 <div>
    <div class="fieldLabel"><label class="control-label">Mission*</label></div>
        <select name="u_mission[]" id="u_mission_2" onchange="showCampaigns(this.id);">
            <option value="">Please select</option>
            <option value="missionOne"  >Mission One</option>
            <option value="missionTwo"  >Mission Two</option>
        </select>
 </div><br clear="right" />
 <div class="campaign"> 
     <div class="missionOne" id="missionOne_2" style="height:3.0em; display:none;">
        <div class="fieldLabel"><label class="control-label">Mission One Campaign*</label></div>
            <select name="u_campaignMissionOne[]" id="u_campaignMissionOne_2" >
                <option value="">Please select</option>                        
                <option value="Campaign-MissionOne-1" >Campaign-MissionOne-1</option>
                <option value="Campaign-MissionOne-2" >Campaign-MissionOne-2</option>
                <option value="Campaign-MissionOne-3" >Campaign-MissionOne-3</option>
                <option value="Campaign-MissionOne-4" >Campaign-MissionOne-4</option>
                <option value="Campaign-MissionOne-5" >Campaign-MissionOne-5</option>

            </select>
    </div>
     <div class="missionTwo" id="missionTwo_2" style="display:none;">
        <div class="fieldLabel"><label class="control-label">Mission Two Campaign*</label></div>
            <select name="u_campaignMissionTwo[]" id="u_campaignMissionTwo_2">
                <option value="">Please select</option>                        
                <option value="Campaign-MissionTwo-1" >Campaign-MissionTwo-1</option>
                <option value="Campaign-MissionTwo-2" >Campaign-MissionTwo-2</option>
                <option value="Campaign-MissionTwo-3" >Campaign-MissionTwo-3</option>
                <option value="Campaign-MissionTwo-4" >Campaign-MissionTwo-4<option>
                <option value="Campaign-MissionTwo-5" >Campaign-MissionTwo-5<option>
            </select>                    
     </div>
 </div><!--end class=campaign--><br clear="right" />
 <div>
    <div class="fieldLabel"><label class="control-label">Data set*</label></div>
        <select name="u_dataSet[]" id="u_dataSet_2">
            <option value="">Please select</option>
            <option value="dataSet1"  >dataSet 1</option>
            <option value="dataSet2"  >dataSet 2</option>
            <option value="dataSet3"  >dataSet 3</option>
            <option value="dataSet4"  >dataSet 4</option>
            <option value="dataSet5"  >dataSet 5</option>
        </select>
 </div><br clear="right" />
</fieldset></div><!--end comp2 div-->
 <div style="height:20px; width:100%;"></div>

<button type="submit" >Submit</button></div>
</form>