如何驗證作為輸入字段的動態創建的表行中的數據

Question

我有一個動態創建的表，其中 row2 和 column2 向前元素是輸入字段。 用戶可以更改這些字段並提交。

我想進行檢查，以便在任何行中：

第一個輸入字段不應大於第二、第三或第四
第二個輸入字段不應大於第三個或第四個。 並且它不應小於 1st。
第 3 個輸入字段不應大於第 4 個。 並且它不應小於 1st 或 2nd。
第 4 個輸入字段不應小於第 1 個或第 2 個或第 3 個。

因此，如果用戶嘗試將任何值更改為無效值並單擊提交按鈕，則應顯示錯誤消息並且不應提交表單。 所以消息窗口上的唯一選項應該是一個確定按鈕，它應該將用戶帶回舊頁面（在對任何字段進行更改之前）。

我嘗試通過使用 getElementById() 並為連續的所有四個輸入字段提供相同的 id 來做到這一點，但是如果存在多個 id（id 不是唯一的），則 getElementById() 返回第一個元素。

我檢查了嘗試 getElementsByName() 的可能性，但是 name 屬性的值是動態生成的，只有“_good_high”、“_warning_low”、“_warning_high”和“_critical_low”是其中的常量。

你能給我建議一些方法來添加這個驗證嗎？

鏈接到 jsfiddle 是ExampleFiddle

<html>
<head>
<title>CommDesk AdminPage</title>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
addPlusSign();
$(".btn1").click(function(){
$(".expand1").toggle();
var btn1Text = $(".btn1").text();
if(btn1Text.indexOf("+") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '-');
$(".btn1").text(temp);
} else if (btn1Text.indexOf("-") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '+');
$(".btn1").text(temp);
}
});
})
function addPlusSign(){
if($(".expand1")){
var btn1Text = $(".btn1").text();
$(".btn1").text(btn1Text + " [+]");
}
}
$(function () {
$('.admin-form')
//we need to save values from all inputs with class 'admin-input'
.find(':input.admin-input')
.each(function () {
//save old value in each input's data cache
$(this).data('oldValue', $(this).val())
})
.end()
.submit(function (ev) {
var changed = false;
$(':input.admin-input', this).filter(function () {
if($(this).val() != $(this).data('oldValue')){
changed = true;
}
});
if($(this).hasClass('changed') && (!changed)){
alert("None of the thresholds were changed!");
ev.preventDefault()
}
if($(this).hasClass('changed') && changed){
var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?")
if (!allowSubmit)
ev.preventDefault()
}
});
});
$(document).on('input', '.admin-input', function(){
$(this).closest('form').addClass('changed');
});
</script>

<style>
.expand1 { display: none;
}
.btn1 { cursor: pointer;
}
body {
background-color: rgb(255,255,255);
font: 15px Verdana, Helvetica, sans-serif;
}
span.note1 {float:left}
span.note2 {font-size:90%}
table#t02, #t02 th, #t02 td {
border: none;
border-collapse: collapse;
font-size:90%;
font-weight:normal;
}

#button1{
position: relative;
top:10px;
left:75%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}
</style>

</head>
<body>
<form id="form1" method="post" class="admin-form">
<div style="float:left; width:50%">
<table id="t02" class="table2">
<tr>
<th style="padding:0 30px 0 0;"></th>
<th></th>
<th style="padding:0 10px 0 0;">Green</th>
<th colspan="3" style="padding:0 10px 0 0">Yellow</th>
<th></th>
<th style="padding:0 10px 0 0">Red</th>
</tr>
<tr>
<td class="btn1" style="padding:0 30px 0 0;"><b>Row1</b></td>
<td>&lt</td>
<td style="padding:0 10px 0 0"><input type="text", class="admin-input", name="acd_call_volume_good_high", value="50", id="1", size="3", maxlength="3"></td>
<td><input type="text", class="admin-input", name="acd_call_volume_warning_low", value="50", id="1", size="3", maxlength="3"></td>
<td>to</td>
<td style="padding:0 10px 0 0"><input type="text", class="admin-input", name="acd_call_volume_warning_high", value="100", id="1", size="3", maxlength="3"></td>
<td>&gt</td>
<td style="padding:0 10px 0 0"><input type="text", class="admin-input", name="acd_call_volume_critical_low", value="100", id="1", size="3", maxlength="3"></td>
</tr>
<tr>
<td align="center" class="expand1">SubRow1</td>
<td class="expand1">&lt</td>
<td class="expand1"><input type="text", name="acd_call_volume_good_high_SubRow1", value="50", id="2", size="3", maxlength="3"></td>
<td class="expand1"><input type="text", name="acd_call_volume_warning_low_SubRow1", value="50", id="2", size="3", maxlength="3"></td>
<td class="expand1">to</td>
<td class="expand1"><input type="text", name="acd_call_volume_warning_high_SubRow1", value="100", id="2", size="3", maxlength="3"></td>
<td class="expand1">&gt</td>
<td class="expand1"><input type="text", name="acd_call_volume_critical_low_SubRow1", value="100", id="2", size="3", maxlength="3"></td>
</tr>
</table>
<input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
</div>
</form>
</body>
</html>

Answer 1

如果您將以下代碼段添加到您的 main $(function() {....

$( '.admin-input' ).change( function( e ) {
    temp = e.target.name.split( '_' )
    col = temp[ temp.length-2 ] + '_' + temp[ temp.length-1 ]
    #validation logic
})

col將為您提供更改后的單元格名稱的最后一部分，例如warning_low 。 從那里您可以進行任何您想要的驗證。

如果您可以更改您的 perl 代碼以稍微更改單元格的名稱，以便有更好的分隔符可以拆分，它會稍微清理代碼（例如acd_call_volume-warning_low ），但它並不那么重要。

我也會谷歌搜索“jquery 驗證器”

如何驗證作為輸入字段的動態創建的表行中的數據

問題描述

1 個解決方案

解決方案1
0 2015-11-03 09:26:37

如何驗證作為輸入字段的動態創建的表行中的數據

問題描述

1 個解決方案

解決方案1 0 2015-11-03 09:26:37

解決方案1
0 2015-11-03 09:26:37