如何验证面框中的表单字段

How to validate form fields in a facebox?

本文关键字：表单 字段 何验证 验证      更新时间：2023-09-26

我需要验证面框中显示的表单字段。

问题是我无法使用 javascript 获取字段的值。

例如：document.form.field_name.value 不返回其值。

代码示例：

<script type="text/javascript">
function validate()
{
  if (document.form1.field.value=='')
{
   alert ("Field cannot be left blank");
}
}
</script>

<form name="form1" onsubmit="return validate()">
<input type="text" name="field" /> 
</form>

执行此操作的一种方法是将值直接从表单传递到验证代码。

<form name="form" id="form" onsubmit="return validate(this.field.value)">
<input type="text" id="field" /> 
</form>

或者，您甚至可以使用没有表单的文本框，方法是： 

<input type="text" id="field" 
onkeydown="if (event.keyCode == 13) return validate(this.value)" />

更新脚本以允许使用新的值参数：

<script type="text/javascript">
 function validate(val) {
   if (val.length < 1)
   {
      alert ("field cannot be left blank");
      return false; //to stop the default action of submitting the form
   } else {
      alert ("Value: "+val);
      return true; //allow to submit the page
   }
 }
</script>

这实际上是一个非常容易和简单的验证，但不要忘记根据您是否希望系统继续提交来设置返回操作。

我不确定您是从哪里提取页面的，是从远程 html 地址还是本地存储的div。 所以我不确定为什么您从 DOM 中提取值的解决方案不起作用。 我通常使用 jquery 从面框窗口中的不同字段获取和设置值没有问题。

注意：您必须小心放置脚本的位置。 这取决于您的应用程序，但有时您可能希望将脚本放在根文档中而不是面框页面中，因为如果您加载远程面框div，则范围会发生变化，并且当脚本嵌入到远程面框div 中时，可能需要引用 parent.document 来访问父字段。

Facebox 复制显示的 DOM 块，有效地创建具有重复 id 的元素。这是 HTML 标准不允许的。你的 JavaScript 疯狂地寻找一个由其 id 唯一标识的元素，但它找到了其中的 2 个......

这是Facebox中的一个巨大错误。面框中的任何代码都不应具有 ID。当面框显示时，您的所有绑定都应更新。

相关文章：