背景信息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