添加新行时验证工作不正常



我有一个表,每行都包含一个"删除链接",对于整个表,add additional file link位于表的底部。

每当您按下add additional link时,它都会添加一个新行(即一个标签(称为文件)和浏览按钮以及一个名为description的文本框),但在添加新行之前,当您按下添加链接时,它将首先验证行中的每个字段是否都有所需值。如果文件已上载,文本已输入description文本框,它将添加一个新的空行,否则它将要求输入值字段。

但我的问题是,当我完美地添加两行时,如果我删除第一行,然后按两次添加附加链接,那么它会添加两个空行,但不应该。当按下添加附加链接时,只应添加一行,如果再次按下,则应验证字段是否包含有效值,如果字段正常,则仅允许用户在其下方添加新行,并且过程必须如此。但不应允许用户添加两个新的空行。

如果最后一行填充了正确的值,则只应添加另一行。。。。关于这个问题,有人能帮我吗。我的代码是:

<script type="text/javascript">
var addDiv = $('#listfiles');
var i = $('#addinput p').size() + 1;
$('#addNew')
.live(
'click',
function(event) {
flag = true;
var row_len = $('#listfiles tr').length;
var cnt = parseInt($("#noOfFiles").val());
cnt=row_len;
var targetId = $('#newfileid').val();
var descrId = $('#newdescrid').val();
var fileName = $("#" + targetId).val();
var descrName = $("#" + descrId).val();
if(descrName == undefined)
{
descrName="";
}
descrName = $.trim(descrName);
if (fileName != undefined) {
if (fileName.length == 0) {
$("#error").text("Please add a new file for browse button.
Remove file row if file isn't to be uploaded.").show();
$("#error").css("color", "red");
event.preventDefault();
} else
if (!(fileName.match(/.(?:csv)$/))) {
$("#error").text("Uploaded file(s) must be in CSV format. Please 
upload a new file.").show();
$("#error").css("color", "red");
event.preventDefault();
} else if (descrName.length == 0|| descrName == '') {
$("#error").text("Please add a new description for the File.").show();
$("#error").css("color", "red");
event.preventDefault();
} else {
alert("1st else");
$(
'<tr class="filerow">'
+ '<td width="265px">'
+ '<span class="browse-text">File '
+ (cnt + 1)
+ ':</span>'
+ '<span class="browsebutton"> <input type="file" 
id="addfile' +  cnt   + '" name="ivrsFiles[' +  cnt   + '].
file"  value="ivrsFiles[' + cnt + '].file"/><span class="description">
<input type=text ></span></span>'
+ '</td>'
+ '<td>'
+ 'Description:&nbsp;<input type="text" id="descr' +  
cnt   + '" name="ivrsFiles[' +  cnt   + '].fileDescription" value=""/>'
+ '<td valign="middle"><a id="remNew1" name="remNew[' + cnt 
+ ']"  href="#" class="delete-file">Delete file</a></td>'
+ '</td>' + '</tr>')
.appendTo(addDiv);
$("#newfileid").attr("value",'addfile' + cnt);
$("#newdescrid").attr("value",'descr' + cnt);
cnt = cnt + 1;
$("#noOfFiles").attr("value", cnt);
return false;
}
} else if (fileName == undefined) { 
alert("2nd else");
$(
'<tr class="filerow">'
+ '<td width="265px">'
+ '<span class="browse-text">File '
+ (cnt + 1)
+ ':</span>'
+ ' <span class="browsebutton"><input type="file" id="addfile' +
cnt   + '" name="ivrsFiles[' +  cnt   + '].file" value="ivrsFiles
[' + cnt + '].file"/><span class="description"><input type=text></span></span>'
+ '</td>'
+ '<td>'
+ 'Description:&nbsp;<input type="text" id="descr' +  cnt   + '"
name="ivrsFiles[' +  cnt   + '].fileDescription" value=""/>'
+ '<td valign="middle"><a id="remNew1" name="remNew[' + cnt  + ']" 
href="#" class="delete-file">Delete file</a></td>'
+ '</td>' + '</tr>').appendTo(
addDiv);
$("#newfileid").attr("value", 'addfile' + cnt);
$("#newdescrid").attr("value", 'descr' + cnt);
cnt = cnt + 1;
$("#noOfFiles").attr("value", cnt);
return false;
}
});
$('#remNew1')
.live(
'click',
function() {    
var targetId = $('#newfileid').val();
var fileName = $("#" + targetId).val();
var cnt = parseInt($("#noOfFiles").val());
var agree = confirm("Are you sure? If you choose OK, This Template
will be Removed");
if (agree) {
$(this).parent().parent().remove();
$('#listfiles tr').each(function (i) {
var index = i + 1;
$('td:first .browse-text', this).text('File ' + index + ':');
});
somethingChanged = true;
cnt = cnt - 1;
$("#noOfFiles").attr("value", cnt);
if (fileName == undefined) {
window.location = "files_formulae.htm?projectId="
+ $
(
project.projectId
)
;
} 
} else
return false;
});
});
</script>
<body>
<table class="filetable" cellpadding='8' cellspacing='5'id="listfiles">
<c:forEach var="ivrsFile" items="${project.ivrsFiles}"varStatus="status">
<tr id="filerow">
<td width='265px' ><span class="browse-text">File <c:out
value='${status.index + 1}' />:</span>
<c:if   test="${fn:length(ivrsFile.fileName) > 0}">
<form:input id="addFile${status.index}"
path="ivrsFiles[${status.index}].fileName" readonly="readonly"/>
<form:hidden path="ivrsFiles[${status.index}].fileID" />
</c:if> 
<c:if test="${fn:length(ivrsFile.fileName) <= 0}">
<form:hidden path="ivrsFiles[${status.index}].fileName" />
<span class="browsebutton"> <input style="color: #F67D08"  type="file" 
id="addFile${status.index}"
name="ivrsFiles[${status.index}].file"
value="ivrsFiles[${status.index}].file" />
<span class="description"><input   type=text></input></span></span>
<form:hidden path="ivrsFiles[${status.index}].fileID" />
</c:if>
</td>
<td >Description: <form:input id="descr${status.index}"
path="ivrsFiles[${status.index}].fileDescription" /></td>
<td valign='middle'><c:if test="${ivrsFile.fileID ne 0 }">
<a id="remNew"href="files_delete.htm?delete=yes&projectId=
${project.projectId}& fileID=${ivrsFile.fileID}"
onclick="return confirmDelete('${project.projectId}');"
class='delete-file'>Delete file</a>
</c:if> <c:if test="${ivrsFile.fileID eq 0 }">
<a id="remNew1" href="#"  class='delete-file'>Delete file</a>
</c:if></td>
</tr>
</c:forEach>
</table>
<a href="#" id="addNew" class='add-file'>Add additional file</a>
</body>

尝试更改此项,因为.live()已弃用:

$('#addNew').live('click',function(event) {

到此:

$(document).on('click', '#addNew', function(event) {

最新更新