Question

我想验证我的表单，但仅限于当时正在显示其周围的div。这就是我到目前为止所做的：

function validateForm()
 {
 var x=document.forms["config"]["itemname5"].value;
if (document.getElementById("customtext").style.display=="block" || x==null)
   {
   alert("Text box must be filled in");
   return false;
   }
 }

HTML代码段：

<div class="hide" id="customtext">Enter the text you require on the module. eg. "DAVE" max 6 letters<br />
<input type=text name="itemname5"  class="nicebox" value='' maxlength="6" style="font-size:14; font-weight:bold; width:210px; vertical-align:top; height:20px;">
</div>

我想要它，以便如果显示div，它会告诉用户他们是否没有输入任何文本，也不会发布表格。

以下是页面：http://www.censdigital.com/2012/earplugs-config.html

提前致谢！

Answer 1

当隐藏customText div的父级时，您的逻辑可能会失败。如果你需要处理这样的情况，通过jquery可以非常简单。

您可以通过

简单检查元素是否可见

$(x).is(":visible") /*returns true or false*/

编辑：

要使用jquery，将其添加到页面的head部分，您也可以下载此js文件并在本地托管。

添加完成后，您可以通过

检查您的元素x是否可见

if($(x).is(":visible"))
{
  //your element is visible
}

我建议阅读更多关于jQuery的内容，这是一个非常强大的库。并会帮助你很多。 www.jquery.com

Answer 2

您的if语句仅考虑元素display属性设置为"block"的时间，还有许多其他状态，其中元素可见。我会测试它是否没有被隐藏，比如这个

if (document.getElementById("customtext").style.display != "none" && x==""){
   alert("Text box must be filled in"); 
   return false;
}

现在，如果display属性未设置或未设置为"block"，您仍会获得预期结果。

您提交表单的问题可能与您运行功能的方式有关。你能告诉我调用函数的位置吗？看起来您的return false语句只是退出您的功能而不是阻止表单提交。

仅在display = block时验证文本字段

2 个答案: