Question

我正在使用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（日期）函数日期内未定义。

<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)

请你帮我解决这个问题。

提前致谢。

Answer 1

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

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

根据日期选择器的名称，恰当地更改它。

解决方案2

另一个好的风格是给日期选择器一个id并在validate函数中使用该id来检索它的值，比如

document.getElementById('mydate').value;为datepicker：

<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

由于我们有多个元素，并且验证应该适用于所有元素，因此我们必须建立一个类来识别这些元素，然后查看其中任何元素是空还是空。为此，我们必须包括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>

上面的代码是UN-TESTED，但我确信这样的代码可以正常工作。

javascript集合验证无法使用Struts 2标记

1 个答案: