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 を与え、その 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 に答える