JavaScript 集合验证不适用于 Struts 2 标记

javascript collection validation not working with Struts 2 tag

本文关键字：Struts 标记 适用于 不适用 集合 验证 JavaScript      更新时间：2023-09-26

我正在使用 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>

日期验证不适用于以下代码行。在验证日期（日期）函数中，日期是未定义的。

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

请你帮我。

提前谢谢。

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

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

只需根据日期选择器的名称适当地更改此设置即可。

解决方案 2

另一个好的样式是给日期选择器一个 id，并在验证函数中使用该 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

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

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

相关文章：