无需提交的表格表单验证答案

【问题标题】：Tabular form validation without submitting无需提交的表格表单验证
【发布时间】：2011-11-13 23:32:52
【问题描述】：

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

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

欣赏任何想法或建议。

谢谢。

【问题讨论】：

标签： oracle-apex

【解决方案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，如果你有的话。如果它不持有它，则获取父 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 验证，但我知道它们只会被少数人使用，而且仅限于内部使用。这只是一个领域，有一些验证。当验证失败时，我将光标重新聚焦在该字段上，因此他们也无法跳转到下一条记录并进行更改。要么给出了有效值，要么他们重新加载了页面或取消了操作。像这样设置，他们也不能按应用更改，因为模糊事件也会触发，验证字段。

当你的观众更多时，它会变得有点不确定：我的 javascript 被禁用了吗？如果他们想办法解决怎么办？奇葩？

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

【讨论】：