背景信息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
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t">Tue
<input class="checkbox-inline tcdata" type="checkbox" name="dow_w">Wed
<input class="checkbox-inline tcdata" type="checkbox" name="dow_r">Thu
<input class="checkbox-inline tcdata" type="checkbox" name="dow_f">Fri
<input class="checkbox-inline tcdata" type="checkbox" name="dow_s">Sat
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t">Sun
</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 <input class="checkbox-inline tcdata" type="checkbox" name="dow_t2">Tue <input class="checkbox-inline tcdata" type="checkbox" name="dow_w2">Wed <input class="checkbox-inline tcdata" type="checkbox" name="dow_r2">Thu <input class="checkbox-inline tcdata" type="checkbox" name="dow_f2">Fri <input class="checkbox-inline tcdata" type="checkbox" name="dow_s2">Sat <input class="checkbox-inline tcdata" type="checkbox" name="dow_n2">Sun
</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 ...因此它非常準確。
任何幫助搞清楚我的錯誤在哪裏將不勝感激。
我想通一個部分進行。沒有一個複選標記有「id」。只有名字。現在我改變了它,它正在工作。愚蠢的錯誤。但是,如果這是一種簡化代碼的方式,請讓我知道 – Happydevdays