Question

我有一个表单验证脚本，由以下人员调用：

<form id="quote" name="quote" method="get"  onsubmit="return formvalidation();" action="#">

HTML输入：

<input id="sitesinput" name="sitesinput" maxlength="3" value="0" onChange='countAndRun()' />

这是函数的一部分，并且工作正常，如果输入为空，零等则不提交表单：

var x=document.getElementsByName("sitesinput")[0].value;
if (x==null || x=="" || x==0)
  {
  alert("You have not selected a total amount of sites.")
  return false;
  }

但是如果我添加几行，要将窗口聚焦在输入上并给它一个红色边框，无论输入什么，表单都会提交：

  document.getElementByName("sitesinput").style.border="1px solid #F00"
  document.getElementByName("sitesinput").focus()

添加到这样的函数中：

var x=document.getElementsByName("sitesinput")[0].value;
if (x==null || x=="" || x==0)
  {
  alert("You have not selected a total amount of sites.")
  document.getElementByName("sitesinput").style.border="1px solid #F00"
  document.getElementByName("sitesinput").focus()
  return false;
  }

谢谢你的期待。乙

Answer 1

我的猜测是Javascript在某处失败了。如果存在JS错误，例如.style为undefined，则表单最终会发布。

您还会注意到Javascript中没有getElementByName()方法，但有getElementsByName()方法（元素，复数）。这可能是造成问题的原因。

Answer 2

是否因为这条线试图将焦点放在多个元素上？

  document.getElementByNames("sitesinput").focus()

你可以尝试

 document.getElementByNames("sitesinput")[0].focus()

正如getElementsByName函数

中的评论拼写中提到的那样

Answer 3

正确的代码是：

var oInput = document.getElementsByName("sitesinput")[0];
var value = oInput.value;
if (value.length == 0)
{
    alert("You have not selected a total amount of sites.")
    oInput.style.border="1px solid #F00"
    oInput.focus()
    return false;
}

实际上没有必要一遍又一遍地调用getElementsByName。只需调用一次，将元素存储在局部变量中并使用它。您还可以通过确定数字和整数来改进验证：

if (value.length == 0 || isNaN(parseInt(value, 10)))

对于记录，存在运行时错误，因为getElementsByName返回数组，而数组没有style属性或focus方法 - 并且在onsubmit期间出错时，表单将被提交。

Answer 4

你必须尝试这样

               var x=document.getElementsByName("sitesinput")[0].value;
                             if (x==null || x=="" || x==0)
                              {
                              alert("You have not selected a total amount of sites.")
                              document.getElementsByName("sitesinput")[0].style.border="1px solid #F00"
                              document.getElementsByName("sitesinput")[0].focus()
                              return false;
                              }

document.getElementsByName返回一个数组。
没有document.getElementByName 在javascript中，这是导致代码中出错的原因。

奇怪的返回提交行为JavaScript

4 个答案: