Fatal编程技术网
  • javascript/
  • Javascript 如何验证作为输入字段的动态创建的表行中的数据

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

javascript jquery html forms

Javascript 如何验证作为输入字段的动态创建的表行中的数据,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有一个动态创建的表，其中row2和column2 forward元素是输入字段。用户可以更改这些字段并提交 我想开一张支票，以便在任何一行： 第一个输入字段不应大于第二、第三或第四个 第二个输入字段不应大于第三个或第四个。它不应该小于1。 第三个输入字段不应大于第四个。它不应该小于1或2。 第四个输入字段不应小于第1个、第2个或第3个。 因此，如果用户试图将任何值更改为无效值并单击“提交”按钮，则应显示一条错误消息，并且不应提交表单。因此，消息窗口上的唯一选项应该是OK按钮，在对任何字段进行更

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

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

第一个输入字段不应大于第二、第三或第四个 第二个输入字段不应大于第三个或第四个。它不应该小于1。 第三个输入字段不应大于第四个。它不应该小于1或2。 第四个输入字段不应小于第1个、第2个或第3个。 因此，如果用户试图将任何值更改为无效值并单击“提交”按钮，则应显示一条错误消息，并且不应提交表单。因此，消息窗口上的唯一选项应该是OK按钮，在对任何字段进行更改之前，该按钮应将用户带回旧页面

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

我检查了尝试getElementsByName的可能性，但是name属性的值是动态生成的，并且只有_good_high、_warning_low、_warning_high和_critical_low是它的常量部分

您能给我建议一些添加此验证的方法吗

指向JSFIDLE的链接是

如果将以下代码段添加到$main函数{

col将为您提供已更改单元格名称的最后一部分，例如warning_low。从那里您可以执行任何需要的验证

如果您可以更改perl代码，稍微更改单元格的名称，以便有更好的分隔符进行拆分，则会稍微清理代码，例如acd_call_volume-warning_low，但这并不重要

我也会在谷歌上搜索jquery validator

从你的例子中，我看不到任何表的动态生成。嗨，格里芬，实际上这个例子是由perl脚本生成的html页面的最小子集。我只是将其缩小到可能的最小大小。我想我应该在帖子中提到这一点。整个网页都是通用的ted在这个表中有11-12个可折叠的行，还有两个不同数据的表。所有这些表都显示了从MySQL表中获取的数据，当通过单击submit按钮提交表单时，更改的值会在同一个MySQL数据库中更新。嗨，Griffin。谢谢你的建议。我肯定会尝试并检查它对于jquery validator也是如此。但是类admin.input只分配给主行（如Row1）的行，而不分配给子行（如SubRow1）。当单击+号展开主行时，隐藏行将可见。这里的问题是，我要添加的验证逻辑对于主行和子行都是必需的。如果我使用类admin.input然后我认为验证将只应用于主行，而不应用于子行。请告诉我我是否正确或遗漏了某些内容。@300您需要将这些字段作为目标。可以将jQuery中的选择器更改为更复杂的内容，也可以将您的perl代码更改为输出HTML，这样可以更容易地将目标设置为those字段。 
<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>

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