送信しない表形式の検証

Question

APEX 3.2では、JavaScript検証を実行して入力されたデータをチェックし、表形式の各行の上に適切なメッセージを表示できるようにしたいと考えています。

これが表形式であり、ユーザーが行を追加/削除できるようになると、これがどのように機能するかわかりません。

アイデアやご意見をお待ちしております。

ありがとうございました。

Answer 1

さて、表形式でいくつかのjavascript検証を行うのはちょっと複雑なので、何をしているのかを知る必要があります。

まず、確認したい要素のIDまたは名前を知る必要があります。ご存知のように、表形式の要素はsubmit時にapexの配列に格納され、apex_application.g_f01/g_f02/... にアクセスします。これはHTMLコードに反映され、生成された要素には属性 'name'が属している列に設定されています。 idは列とrowindexも保持します。ただし、このIDはアイテムが '暗黙的に'作成されたとき、つまりapex_itemコール（apex_item.textbox(...)）でクエリを記述しなかったときにのみ生成されます。

もう1つは、状態が保存されるフィールドだけに配列列が定義されることです。 「表示のみ」として表示されるアイテムは入力タグで生成されず、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セクションに次の2つの機能を追加しました。

validate_jobは、ただ1つのフィールドelJobの検証を行います。私が使ったバリデーションは基本的なものであり、あなたがどれほど複雑であるかを判断するのはあなた次第です。

ここで同じ行の他のフィールドを参照したい場合は、いくつかのことができます：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を呼び出します。行の作成を許可する場合は、clickイベントを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のバリデーションを使用しましたが、少数のユーザーしか使用せず、内部的にしか使用しないことはわかっていました。 1つのフィールドだけで、いくつかの検証がありました。検証が失敗したときにカーソルをフィールドに再フォーカスさせたので、次のレコードにジャンプしてそれを変更することはできませんでした。有効な値が指定されたか、ページを再読み込みしたり、アクションをキャンセルしたりしました。このように設定すると、ブラーイベントが発生してフィールドの検証が行われるため、変更を適用することもできません。

あなたの聴衆が大きくなると、それはもう少し得意になります。何が私のJavaScriptが無効になっていますか？もし彼らが何らかの方法で見つけたら？ Wizzkids？

私はまだそれが与えるフィードバックが好きですが、より重要な環境では、サーバー側の検証も使用します。これを行うには、「関数がエラーテキストを返す」タイプの検証が必要です。例としてはthis page、いくつかの有用なヒントについてはthis oneをチェックしてください（少なくとも4.0より前！）。また、apex 4.1では、表形式のバリデーションが大幅に向上しました！ ;）