如何验证作为输入字段的动态创建的表行中的数据

How to validate data in dynamically created table rows that are input fields

本文关键字：创建 动态 数据 字段 输入 何验证 验证      更新时间：2023-09-26

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

我想开一张支票，以便在任何一行：

  • 第一个输入字段不应大于第二个、第三个或第四个
  • 第二个输入字段不应大于第三个或第四个。并且它不应该小于1st
  • 第三个输入字段不应大于第四个。并且它不应该小于1或2
  • 第4个输入字段不应小于第1个、第2个或第3个

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

我尝试使用getElementById（），并为一行中的所有四个输入字段提供相同的id，但如果存在多个id（id不是唯一的），getElementById（）会返回第一个元素。

我检查了尝试getElementsByName（）的可能性，但name属性的值是动态生成的，只有"_good_high"、"_warning_low"、"_warning_high"answers"_ccritical_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>

如果将以下代码段添加到主$(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验证器"

相关文章：