0

我正在使用 struts 2 标记迭代 jsp 文件中的列表，如下所示。

<%@ taglib prefix="s" uri="/struts-tags"%>
<head>
<s:head theme="ajax" debug="true" />
<script type="text/javascript">
function add(x) {
    document.insertForm.action="load.action?mode=add&index="+x;
    document.insertForm.submit();
}

function del(x) {
    document.insertForm.action="load.action?mode=delete&index="+x;
    document.insertForm.submit();
}

function copy(x) {
    document.insertForm.action="load.action?mode=copy&index="+x;
    document.insertForm.submit();
}

function validateDate(date) {
    for(var i=0; i<date.length; i++) {
         var x = date[i].value;
         if(x == null || x == "") { 
             alert("please enter the date");
             date[i].focus();
             return false;
         }
    }
}
</script>
</head>

<body>
    <s:form action="insert" name="insertForm">
        <table border="1">
            <tr>
                <th>CHANNEL_ID</th>
                <th>TASK</th>
                <th>DATE</th>
                <th>HOURS</th>
            </tr> 

            <s:iterator value="timeTrackerRecords" status="stat">
                <tr>
                    <td align="center"><s:select name="timeTrackerRecords[%{#stat.index}].channel_Id"
                            list="channelList" value="%{channel_Id}" theme="simple"
                            cssStyle="width:90px;">
                        </s:select></td>

                    <td align="center"><s:select name="timeTrackerRecords[%{#stat.index}].task" list="taskList"
                            value="%{task}" theme="simple" cssStyle="width:90px;">
                        </s:select></td>

                    <td><s:datetimepicker name="timeTrackerRecords[%{#stat.index}].date"
                            value="%{date}" displayFormat="yyyy-MM-dd" theme="simple" />
                    </td>

                    <td align="center"><s:textfield name="timeTrackerRecords[%{#stat.index}].hours" theme="simple" 
                            value="%{hours}" cssStyle="width:90px;" ></s:textfield></td>

                    <td>
                        <input type="submit" value="Add" onclick="add('<s:property value="%{#stat.index}"  />')" />
                    </td>               
                    <td>    
                       <input type="submit" value="Del" onclick="del('<s:property value="%{#stat.index}"  />')" />
                    </td>
                    <td>
                        <input type="submit" value="Copy" onclick="copy('<s:property value="%{#stat.index}"  />')" />
                    </td>

                </tr>
            </s:iterator>
        </table>

         <br>
         <s:submit value="Insert" align="left" onclick="return validateDate(document.insertForm.date)"/>
    </s:form>
</body>

日期验证不适用于下面的代码行。在 validateDate(date) 函数内部，日期未定义。

<td><s:datetimepicker name="timeTrackerRecords[%{#stat.index}].date"
                            value="%{date}" displayFormat="yyyy-MM-dd" theme="simple" />
                    </td>

日期验证正在使用下面的代码行。

<td>
<s:datetimepicker name="date" value="%{date}" displayFormat="yyyy-MM-dd" theme="simple" />
</td>

唯一的区别是声明日期字段如下。

name="date"
name="timeTrackerRecords[%{#stat.index}].date" (is used to pass the form data(date) to action class)

请求你帮我解决这个问题。

提前致谢。

4

1 回答 1

0

在更改日期选择器的名称时，您不会更改传递给验证函数的参数

onclick="return validateDate(document.insertForm.date)"

只需根据日期选择器的名称适当地更改它。

解决方案 2

另一种不错的方式是给日期选择器一个 id 并在 validate 函数中使用该 id 来检索它的值，例如

document.getElementById('mydate').value;对于日期选择器：

<s:datetimepicker id="mydate" ...>

因此，函数可以更改为

function validateDate() {
    var date=document.getElementById('mydate').value;
    alert(date);
    for(var i=0; i<date.length; i++) {
         var x = date[i].value;
         if(x == null || x == "") { 
             alert("please enter the date");
             date[i].focus();
             return false;
         }
    }
}

更新解决方案 3

由于我们有多个元素，并且验证应该对所有元素都有效，所以我们必须建立一个类来识别这些元素，然后查看其中任何一个是否为空或 null。为此，我们必须包括 jquery。

<head>
   <script src="http://code.jquery.com/latest.js"/>
</head>


<s:datetimepicker class="validate-date" .../>
<s:submit onclick="return validate()" .../>


<script>
function validate(){
    var success=true;
    $(".validate-date").each(function(element){
         var x = element.val();
         if(x == null || x == "") { 
             alert("please enter the date");
             date[i].focus();
             success=false;
             break;
         }
    });
    return success;
}
</script>

上面的代码是未经测试的，但我相信这样的东西会正常工作。

于 2013-11-09T03:04:33.460 回答