未提交表格形式驗證

Question

在APEX 3.2中，我希望能夠運行JavaScript驗證以檢查輸入的數據，並以表格形式在每行上方顯示適當的消息。

我不知道這是如何工作，因爲它是一個表格形式，用戶將能夠添加/刪除行。

欣賞任何想法或建議。

謝謝。

Answer 1

好的，在表格形式上做一些javascript驗證有點複雜，你需要知道你在做什麼。

首先，您需要知道您希望檢查的元素的ID或名稱。您可能知道，表格中的元素在提交時存儲在頂點的數組中，並且可以通過apex_application.g_f01/g_f02/... 進行訪問。這反映在html代碼中，並且生成的元素還將屬性「name」設置爲它們所屬的列。該ID還包含該列，加上rowindex。但是警告，這個id只是在隱式地創建這個項目時產生的，也就是說，你沒有用apex_item調用（apex_item.textbox(...)）編寫你的查詢。

另一個問題是，只有保存狀態的字段纔會定義一個數組列。您只會顯示爲「僅顯示」的項目不會使用輸入標記生成，而只會作爲文本保存在td標記中。

總而言之，當你知道這一點時，接下來的步驟應該足夠簡單。看一看頁面源代碼，並記下你想要的目標元素。例如，我去了工作領域。

<tr class="highlight-row"> 
<td headers="CHECK$01" class="data"><label for="f01_0003" class="hideMeButHearMe">Select Row</label><input type="checkbox" name="f01" value="3" class="row-selector" id="f01_0003" /></td> 
<td headers="EMPNO_DISPLAY" class="data">7782</td> 
<td headers="ENAME" class="data"><label for="f03_0003" class="hideMeButHearMe">Ename</label><input type="text" name="f03" size="12" maxlength="2000" value="CLARK" id="f03_0003" /></td> 
<td headers="JOB" class="data"><label for="f04_0003" class="hideMeButHearMe">Job</label><input type="text" name="f04" size="12" maxlength="2000" value="MANAGER" id="f04_0003" /></td> 
<td headers="HIREDATE" class="data"><label for="f05_0003" class="hideMeButHearMe">Hiredate</label><span style="white-space: nowrap;"><input type="text" id="f05_0003" name="f05" maxlength="2000" size="12" value="09-JUN-81" autocomplete="off"></span></td> 
<td headers="SAL" class="data"> 
    <label for="f06_0003" class="hideMeButHearMe">Sal</label><input type="text" name="f06" size="16" maxlength="2000" value="2450" id="f06_0003" /> 
    <input type="hidden" name="f02" value="7782" id="f02_0003" /> 
    <input type="hidden" id="fcs_0003" name="fcs" value="19BD045E01D6BA148B4DEF9DDC8B21B7"> 
    <input type="hidden" id="frowid_0003" name="frowid" value="AAuDjIABFAAAACTAAC" /> 
    <input type="hidden" id="fcud_0003" name="fcud" value="U" /> 
</td> 
</tr> 

在頁面的JavaScript部分i，那麼增加了以下2種功能。

validate_job只對一個字段el元素進行驗證。我使用的驗證只是非常基本的，這取決於你確定你想要它有多複雜。

如果你想在這裏引用同一行的其他字段，你可以做幾件事：從id中提取rowindex，如果你有。如果它不包含它，請獲取父級TR，然後使用.children("input[name='f##'")在同一行中獲取輸入元素。或者，如果您需要一個根本不保存狀態的項目的值，則需要獲取TR元素，然後通過包含列名稱的headers屬性找到包含所需元素的TD。

function validate_job(elJob){ 
    var sJob = $v(elJob).toUpperCase(); 
    $(elJob).val(sJob); 

    //do your validations for the field job here 
    if(sJob=="MANAGER"){ 
     $(elJob).css({"border-color":"red"}); 
     alert("invalid value!"); 
     //depends what you want to do now: 
     //keep the focus on this element? Set a flag an error occured? Store the error?  
     return false; 
    } else { 
     $(elJob).css({"border-color":""}); 
     alert("value ok");     
     }; 
}; 

調用bind_validations onload。如果允許創建行，請將單擊事件綁定到addrow按鈕並調用bind_validations。

function bind_validations(){ 
    //f01 : row selector 
    //f03 : ename 
    //f04 : job 
    //f05 : hiredate 
    //f06 : sal 

    //each input element with attribute name with value f04 
    //blur event is when the user leaves the field, fe tab out, or even click apply changes 
    //much like how when-validate-item behaved in forms 
    $("input[name='f04']").blur(function(){validate_job(this);}); 
}; 

雖然只是一個適當的警告。到目前爲止，我在一些應用程序中使用了javascript驗證，但我知道它們只會被少數人使用，然後纔會在內部使用。這只是一個領域，有一些驗證。當驗證失敗時，我讓光標重新聚焦在字段上，所以他們不能跳到下一個記錄並改變它。要麼給出有效值，要麼重新加載頁面或取消操作。像這樣設置，他們也不能按下應用更改，因爲模糊事件也會觸發，驗證該字段。

當你的觀衆更大時，它會變得更多iffy：我的javascript被禁用了嗎？如果他們找到解決辦法怎麼辦？ Wizzkids？

我仍然喜歡它提供的即時反饋，但在更關鍵的環境中，我也會使用服務器端驗證。爲此，您需要驗證「返回錯誤文本的函數」類型。查看this page的例子，或this one查看一些有用的提示（至少在4.0之前！）。另外：apex 4.1在表格形式驗證方面真的提高了很多！ ;）