2016-11-09 62 views
1

背景信息jquery验证 - 有没有更有效的方法来做到这一点?

我有一张表,其中每一行代表联系信息。 没有必要拥有联系人数据,但如果用户指定了分机号码,他们必须为每个字段指定数据。

问题

我迄今检查的大多数工作领域的代码..但我有一组代表在本周日的复选框。至少必须选择一天。 代码现在失败......即使我选中了一个复选框,我仍然收到错误。

另外我想知道是否有一种方法来简化我的IF语句,检查复选框的状态。代码非常冗长......而且很难看。

HTML

<table class="table table-bordered table-hover tcdata"> 
    <tbody><tr><td colspan="6"><h3>Time Conditions</h3></td></tr> 
    <tr><td colspan="6">Default Rule:</td></tr> 

    <tr id="time_conditions"> 
     <td><input class="form-control starttc tcdata" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime" id="starttime"></td> 
     <td><input class="form-control tcdata" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime" id="endtime"></td> 
     <td><input class="form-control tcdata" type="input" placeholder="Extension" name="extension" id="extension"></td> 
     <td><input class="form-control tcdata" type="input" placeholder="Domain" name="domain" id="domain"></td> 
     <td> 
      <label class="checkbox-inline"><b>Days of Week:</b></label> 
      <input class="checkbox-inline tcdata" type="checkbox" name="dow_m">Mon&nbsp; 
      <input class="checkbox-inline tcdata" type="checkbox" name="dow_t">Tue&nbsp; 
      <input class="checkbox-inline tcdata" type="checkbox" name="dow_w">Wed&nbsp; 
      <input class="checkbox-inline tcdata" type="checkbox" name="dow_r">Thu&nbsp; 
      <input class="checkbox-inline tcdata" type="checkbox" name="dow_f">Fri&nbsp; 
      <input class="checkbox-inline tcdata" type="checkbox" name="dow_s">Sat&nbsp; 
      <input class="checkbox-inline tcdata" type="checkbox" name="dow_t">Sun&nbsp; 
     </td> 
     <td><button id="addtc" type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i></button></td>      
    </tr> 
    <tr class="showAdditionalRulesLabel" style=""><td colspan="6">Addtional Rules:</td></tr> 
    <tr> 
     <td><input class="form-control starttc tcdata" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime2"></td> 

     <td><input class="form-control tcdata" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime2"></td> 
     <td><input class="form-control tcdata" type="input" placeholder="Extension" name="extension2"></td> 
     <td><input class="form-control tcdata" type="input" placeholder="Domain" name="domain2"></td> 
     <td colspan="2"><label class="checkbox-inline"><b>Days of Week:</b></label><input class="checkbox-inline tcdata" type="checkbox" name="dow_m2">Mon&nbsp;<input class="checkbox-inline tcdata" type="checkbox" name="dow_t2">Tue&nbsp;<input class="checkbox-inline tcdata" type="checkbox" name="dow_w2">Wed&nbsp;<input class="checkbox-inline tcdata" type="checkbox" name="dow_r2">Thu&nbsp;<input class="checkbox-inline tcdata" type="checkbox" name="dow_f2">Fri&nbsp;<input class="checkbox-inline tcdata" type="checkbox" name="dow_s2">Sat&nbsp;<input class="checkbox-inline tcdata" type="checkbox" name="dow_n2">Sun&nbsp; 
    </td></tr> 

<tr id="submitbtnsection"><td colspan="6"><input type="submit" name="submit" id="submit" class="btn btn-primary" value="Assign"></td></tr> 

      </tbody> 
</table> 

而这里的,当他们尝试提交表单时调用的JavaScript(部分):

$('.tcdata tr').each(function (i, row) { 
      var $row = $(row); 
      var $ext = $row.find('input[name*="extension"]'); 
      if ($ext.val()) { 
        //extension data has been defined.. make sure you have start time/end time 
        var $start = $row.find('input[name*="starttime"]'); 
        var $end = $row.find('input[name*="endtime"]'); 
        var $domain = $row.find('input[name*="domain"]'); 
        if (!$start.val() || !$end.val() || !$domain.val()) { 
          $(".btn-warning").html("Whoops! Every time condition must have a start/end time, and a domain"); 
          e.preventDefault(); 
          return; 
        } 

        //check days of week. 
        var $dow_m = $row.find('input[name*="dow_m"]'); 
        var $dow_t = $row.find('input[name*="dow_t"]'); 
        var $dow_w = $row.find('input[name*="dow_w"]'); 
        var $dow_r = $row.find('input[name*="dow_r"]'); 
        var $dow_f = $row.find('input[name*="dow_f"]'); 
        var $dow_s = $row.find('input[name*="dow_s"]'); 
        var $dow_s = $row.find('input[name*="dow_n"]'); 
        if ((!$("#dow_m").is(':checked')) && (!$("#dow_t").is(':checked')) && (!$("#dow_w").is(':checked')) && (!$("#dow_r").is(':checked')) && (!$("#dow_f").is(':checked')) && (!$("#dow_s").is(':checked')) && (!$("#dow_n").is(':checked'))) { 
          //nothing selected 
            $(".btn-warning").html("Whoops! Every time condition must have a day of week assign to it"); 
            e.preventDefault(); 
            return; 
        } 


      } 
    }); 

一个额外的评论 - 的情况下,它可以帮助... 您会注意到,对于表中的每一行,除了末尾的数字增加外,这些字段的名称是相同的。因此,例如:

name="dow_w" 
    name="dow_w2" 

这些行的jQuery动态生成的......但我不认为这是相关的,所以我没有包括的代码。 您在上面看到的html代码是RENDERED html ...因此它非常准确。

任何帮助搞清楚我的错误在哪里将不胜感激。

+0

我想通一个部分进行。没有一个复选标记有“id”。只有名字。现在我改变了它,它正在工作。愚蠢的错误。但是,如果这是一种简化代码的方式,请让我知道 – Happydevdays

回答

0
  1. 每个规则由多个<tr>的 - 所以它并没有真正意义的循环在他们每个人。取而代之的是使用<tbody>对您的<tr>组进行分组,并在多个<tbody>上循环。

  2. 我认为输入具有相同名称的正确方法是追加[n](其中n是一个数字)。这样,所有与[n]相同的输入被认为是相关的。

  3. 你有可能想要具有相同名称的输入具有相似的样式。而不是使用ID,使用类。

  4. 我发现最简单的方法缓存元素[n]最后是使用[name^=name]其中^=的意思是“开始”。

  5. 您可以使用^=选择器和:checked的组合来获取已检查的日期。然后使用length属性来计算选择的数量。

HTML(1-3)

<table class="table table-bordered table-hover tcdata"> 
    <tbody> 
    <tr> 
     <td colspan="6"> 
     <h3>Time Conditions</h3></td> 
    </tr> 
    <tr> 
     <td colspan="6">Default Rule:</td> 
    </tr> 

    <tr id="time_conditions"> 
     <td> 
     <input class="form-control starttc tcdata starttime" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime[0]"> 
     </td> 
     <td> 
     <input class="form-control tcdata endtime" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime[0]"> 
     </td> 
     <td> 
     <input class="form-control tcdata extension" type="input" placeholder="Extension" name="extension[0]"> 
     </td> 
     <td> 
     <input class="form-control tcdata" type="input" placeholder="Domain" name="domain[0]" id="domain"> 
     </td> 
     <td> 
     <label class="checkbox-inline"><b>Days of Week:</b></label> 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_m[0]">Mon&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_t[0]">Tue&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_w[0]">Wed&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_r[0]">Thu&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_f[0]">Fri&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_s[0]">Sat&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_t[0]">Sun&nbsp; 
     </td> 
     <td> 
     <button id="addtc" type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i></button> 
     </td> 
    </tr> 

    </tbody> 
    <tbody> 
    <tr class="showAdditionalRulesLabel" style=""> 
     <td colspan="6">Addtional Rules:</td> 
    </tr> 
    <tr> 
     <td> 
     <input class="form-control starttc tcdata" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime[1]"> 
     </td> 

     <td> 
     <input class="form-control tcdata" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime[1]"> 
     </td> 
     <td> 
     <input class="form-control tcdata" type="input" placeholder="Extension" name="extension[1]"> 
     </td> 
     <td> 
     <input class="form-control tcdata" type="input" placeholder="Domain" name="domain[1]"> 
     </td> 
     <td colspan="2"> 
     <label class="checkbox-inline"><b>Days of Week:</b></label> 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_m[1]">Mon&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_t[1]">Tue&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_w[1]">Wed&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_r[1]">Thu&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_f[1]">Fri&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_s[1]">Sat&nbsp; 
     <input class="checkbox-inline tcdata" type="checkbox" name="dow_n[1]">Sun&nbsp; 
     </td> 
    </tr> 

    <tr id="submitbtnsection"> 
     <td colspan="6"> 
     <input type="button" name="submit" id="submit" class="btn btn-primary" value="Assign"> 
     </td> 
    </tr> 

    </tbody> 
</table> 

的JavaScript(4-5)

$('.tcdata tbody').each(function() { 
    // $row is kinda misleading - better to say: $tbody 
    var $row = $(this); 
    // cleaner to store all the elements you need together 
    var $ext = $row.find('[name^="extension"]'), 
     $start = $row.find('[name^="starttime"]'), 
     $end = $row.find('[name^="endtime"]'), 
     $domain = $row.find('[name^="domain"]'); 

    // check if the user specifies an extension number 
    if ($ext.val()) { 
     // they must specify data for every field 
     if (!$start.val() || !$end.val() || !$domain.val()) { 
     $warning.html("Whoops! Every time condition must have a start/end time, and a domain"); 
     e.preventDefault(); 
     return; 
     } 
     // and at least one day must be selected 
     if (!$row.find('[name^=dow_]:checked').length) { 
     $warning.html("Whoops! Every time condition must have a day of week assign to it"); 
     e.preventDefault(); 
     return; 
     } 
    } 
}); 

Demo

相关问题