表格表单验证无需提交

Question

在 APEX 3.2 中，我希望能够运行 JavaScript 验证来检查输入的数据并在表格形式的每行上方显示适当的消息。

我不确定这将如何工作，因为它是表格形式并且用户将能够添加/删除行。

感谢任何想法或建议。

谢谢。

Answer 1

好的，在表格表单上进行一些 javascript 验证有点复杂，您需要知道自己在做什么。

首先，您需要知道要检查的元素的 ID 或名称。您可能知道，表格形式的元素在提交时存储在 apex 的数组中，并通过 apex_application.g_f01/g_f02/... 访问
这反映在 html 代码中，生成的元素也将属性“name”设置为它们所属的列。 id 还保存列以及行索引。但请注意，只有“隐式”创建项目时，才会像这样生成此 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 部分中，我添加了以下 2 个函数。

validate_job 仅对一个字段（元素 elJob）进行验证。我使用的验证非常基本，由您决定您想要的复杂程度。

如果您想在此处引用同一行中的其他字段，您可以执行以下操作：从 id 中提取 rowindex（如果有）。如果不包含 it，则获取父 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");                
        };
};

onload 调用bind_validations。如果允许创建行，请将单击事件绑定到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 验证，但我知道它们只会被少数人使用，而且只能在内部使用。这只是一个字段，需要进行一些验证。当验证失败时，我让光标重新聚焦在该字段上，这样他们就无法跳到下一条记录并更改它。要么给出了有效值，要么他们重新加载页面或取消操作。像这样设置，他们也不能按应用更改，因为模糊事件也会触发，从而验证字段。

当你的受众更大时，事情就会变得更加不确定：我的 javascript 被禁用了吗？如果他们找到解决办法怎么办？威兹小子？

我仍然喜欢它提供的即时反馈，但在更关键的环境中，我还会使用服务器端验证。为此，您需要验证“返回错误文本的函数”类型。查看此页面<例如 /a> 或 这个 提供一些有用的提示（至少对于 4.0 之前的版本） ！）。另外：apex 4.1 在表格表单验证方面确实改进了很多！ ;)