1

3行のレコードが存在する以下のHTMLで検証を実行する必要があります。これらの3つのテーブル行には、2つの入力可能なフィールド（選択リスト（「理由」フィールド）とテキストエリア項目（「コメント」フィールド））があります。

このテーブルのすべてのレコードについて、jQueryを使用して検証を追加する必要があります。これにより、ユーザーが最初に選択せずに、3つのテーブル行のいずれかのtextareaフィールドにカーソルを置くことを最初に決定したかどうかが確認されます。選択リストから（つまり、オプション値を0にすることはできません）、「理由の選択が必要です」というアラートを表示し、この「理由」フィールドにフォーカスを置きます。

<table summary="Contacts" class="uReport uReportStandard">
    <thead>
        <tr>
            <th id="CONTCT_NM">Contact Name</th>
            <th id="TEL_NO">Telephone
                <br/>No.</th>
            <th id="STATE">State</th>
            <th id="REAS">Reason</th>
            <th id="DATE_CALLED">Date
                <br/>Contacted</th>
            <th id="MPA_COMMENT">Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="CONTCT_NM">Contact A</td>
            <td headers="TEL_NO">123456</td>
            <td headers="STATE">VIC</td>
            <td headers="REAS">
                <input type="hidden" name="f01" value="16919" />
                <input type="hidden" name="f02" value="100319" />
                <select name="f10" id="selectLOV1" class="lov_select">
                    <option value="0">--- Please select a reason ---</option>
                    <option value="1" selected="selected">Contacted / Spoken</option>
                    <option value="2">Contacted / Unavailable</option>
                    <option value="3">Other</option>
                </select>
            </td>
            <td headers="DATE_CALLED">
                <input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42"
                class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;"
                />
            </td>
            <td headers="COMMENT">
                <textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact A</textarea>
            </td>
        </tr>
        <tr>
            <td headers="CONTCT_NM">Contact B</td>
            <td headers="TEL_NO">123456</td>
            <td headers="STATE">VIC</td>
            <td headers="REAS">
                <input type="hidden" name="f01" value="16919" />
                <input type="hidden" name="f02" value="100314" />
                <select name="f10" id="selectLOV2" class="lov_select">
                    <option value="0">--- Please select a reason ---</option>
                    <option value="1" selected="selected">Contacted / Spoken</option>
                    <option value="2">Contacted / Unavailable</option>
                    <option value="3">Other</option>
                </select>
            </td>
            <td headers="DATE_CALLED">
                <input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42"
                class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;"
                />
            </td>
            <td headers="COMMENT">
                <textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact B</textarea>
            </td>
        </tr>
        <tr>
            <td headers="CONTCT_NM">Contact C</td>
            <td headers="TEL_NO">123456</td>
            <td headers="STATE">VIC</td>
            <td headers="REAS">
                <input type="hidden" name="f01" value="16919" />
                <input type="hidden" name="f02" value="100312" />
                <select name="f10" id="selectLOV3" class="lov_select">
                    <option value="0">--- Please select a reason ---</option>
                    <option value="1" selected="selected">Contacted / Spoken</option>
                    <option value="2">Contacted / Unavailable</option>
                    <option value="3">Other</option>
                </select>
            </td>
            <td headers="DATE_CALLED">
                <input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42"
                class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;"
                />
            </td>
            <td headers="COMMENT">
                <textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact C</textarea>
            </td>
        </tr>
    </tbody>
</table>
4

1 に答える 1

2

私はあなたを正しく理解したことを願っています：

編集：申し訳ありませんが、アラートを忘れました：http: //jsfiddle.net/HuVUL/1/

于 2012-08-31T13:58:30.320 に答える