添加新行时验证无法正常工作?

时间:2013-12-20 07:29:08

标签: jquery

我有一个表,每行包含一个'删除链接',对于整个表格,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>

1 个答案:

答案 0 :(得分:0)

尝试更改此内容,因为不推荐使用.live()

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

到此:

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