jquery驗證 - 有更有效的方法嗎？
[英]jquery validation - is there a more efficient way to do this?
問題描述
背景資料
我有一個表格，每行代表聯系信息。 沒有必要擁有聯系人數據，但如果用戶指定了分機號碼，他們必須為每個字段指定數據。
問題
到目前為止，我檢查大多數字段的代碼都在工作..但我有一組復選框代表一周中的一天。 必須至少選擇一天。 代碼現在失敗了...即使我選擇了一個復選框，我也會收到錯誤。
另外我想知道是否有辦法簡化我的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 ...所以它非常准確。
任何幫助搞清楚我的bug在哪里都會受到贊賞。
1 個解決方案
解決方案1
0 2016-11-09 23:18:40
每個規則都由多個
<tr>- 所以循環遍歷每個規則並沒有多大意義。 而是使用<tbody>對<tr>組進行分組，並遍歷多個<tbody>。我認為輸入具有相同名稱的正確方法是追加
[n]（其中n是數字）。 這樣，所有具有相同[n]輸入都被認為是相關的。您可能希望具有相同名稱的輸入具有相似的樣式。 而不是使用ID，使用類。
我發現最后用
[n]緩存元素的最簡單方法是使用[name^=name]，其中^=表示“以...開頭”。您可以使用
^=選擇器和: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
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t[0]">Tue
<input class="checkbox-inline tcdata" type="checkbox" name="dow_w[0]">Wed
<input class="checkbox-inline tcdata" type="checkbox" name="dow_r[0]">Thu
<input class="checkbox-inline tcdata" type="checkbox" name="dow_f[0]">Fri
<input class="checkbox-inline tcdata" type="checkbox" name="dow_s[0]">Sat
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t[0]">Sun
</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
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t[1]">Tue
<input class="checkbox-inline tcdata" type="checkbox" name="dow_w[1]">Wed
<input class="checkbox-inline tcdata" type="checkbox" name="dow_r[1]">Thu
<input class="checkbox-inline tcdata" type="checkbox" name="dow_f[1]">Fri
<input class="checkbox-inline tcdata" type="checkbox" name="dow_s[1]">Sat
<input class="checkbox-inline tcdata" type="checkbox" name="dow_n[1]">Sun
</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;
}
}
});
試圖找到一種更有效的方法來進行多次替換，而無需在jQuery中重復相同的代碼
[英]Trying to find a more efficient way to do multiple replaces without repeating the same code in jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.