Странное возвращение при отправке поведения 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

Вы должны попробовать вот так

               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 это то, что вызывает ошибки в вашем коде.

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

Я думаю, что Javascript где-то выходит из строя. Если есть ошибки JS, потому что, например, .style равно undefined, ваша форма будет опубликована.

Вы также заметите, что в Javascript нет метода getElementByName(), но есть метод getElementsByName() (Elements, множественное число). Скорее всего, это послужило причиной вашей проблемы.