Question

我有一个动态创建的表，其中row2和column2向前元素是输入字段。用户可以更改这些字段并提交。

我想把支票放在任何一行：

第一个输入字段不应大于第二，第三或第四
第二个输入字段不应大于第3或第4个。它不应小于第一。
第3个输入字段不应大于第4个。它不应小于第1或第2。
第4个输入栏不应小于1号，2号或3号。

因此，如果用户尝试将任何值更改为无效值并单击“提交”按钮，则应显示错误消息，并且不应提交表单。因此，只有消息窗口上的选项应该是一个OK按钮，它应该将用户带回旧页面（在对任何字段进行更改之前）。

我尝试通过使用getElementById（）并为一行中的所有四个输入字段赋予相同的id，但是如果存在多个id（id不是唯一的），则getElementById（）返回第一个元素。 / p>

我检查了尝试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

如果您将以下代码段添加到主$(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）但是它不那么重要。

我也会google for＆＃34; jquery validator＆＃34;

如何验证动态创建的表行中的数据，这些表是输入字段

1 个答案: