奇怪的返回提交行为JavaScript

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;
  }

谢谢你的光临。B.

Answer 1

我的猜测是Javascript在某个地方失败了。如果因为.style是undefined而出现JS错误，则您的表单最终会发布。

您还将注意到，Javascript中没有getElementByName()方法，但有一个getElementsByName()方法（Elements，复数）。这很可能是造成你问题的原因。

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返回一个数组
• 没有文档.getElementByName在javascript中，这就是导致代码中出现错误的原因