2016-11-09 63 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

相關問題