JS проверка формы, чтобы убедиться, что если имя не введено, появляется всплывающее окно - PullRequest
Новая
       72

JS проверка формы, чтобы убедиться, что если имя не введено, появляется всплывающее окно

0 голосов
/ 02 мая 2020

Идея состоит в том, что, когда пользователю предоставляется окно «Каково ваше имя», если он не заполняет его, он получит всплывающее сообщение со словами «пожалуйста, введите ваше имя».

Я не понимаю, почему форма не возвращает всплывающее окно, так как я вызываю правильный метод getElementsByName, который мне кажется, и проверяет, было ли введено значение. Я попытался изменить elementsByName на ("name") и ("UserInfo"), но ничего не происходит. У кого-нибудь есть идеи, в чем может быть проблема? Я знаю, что кнопка отправки отсутствует в форме, но это было сделано намеренно, так как в противном случае мне пришлось бы разместить больше кода, чем необходимо.

Фрагмент кода прилагается. Имя функции в html называется validate ();

ТАКЖЕ, Я НЕ МОГУ СДЕЛАТЬ ЛЮБЫЕ ИЗМЕНЕНИЯ В HTML, ЭТО НЕОБХОДИМО ОСТАВАТЬСЯ КАК ЕСТЬ. 

function Validate() {
  alert(document.getElementsByName("UserInfo")[0].value);
  if (name == "" || name == null) {
    alert('Please enter a name');
    return false;
  } else {
    return true;
  }
}
<h2>A Simple Quiz</h2>
<fieldset>
  <legend>About You</legend>
  <p id="UserInfo">What is your name?</p>
  <div>
    <input type="text" name="UserInfo" size="40" />
  </div>
</fieldset>

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Как мы видим в вашем коде, вы допустили крошечную ошибку. Вы собираетесь оценить name, когда вы его вообще не определили. Поэтому нам нужно определить переменную на основе вашего входного значения, как показано ниже: 

const name = document.getElementsByName("UserInfo")[0].value; // Since this query will return an array of items where they name are UserInfo I strongly suggest to don't use it for getting inputs value.

Из коробки ПРИМЕЧАНИЕ: Поскольку входное значение и, как правило, входные данные в каждой форме являются уникальными элементы, поэтому лучший способ получить их значение - присвоить им уникальный идентификатор, а затем связать их со своим уникальным идентификатором, например:

HTML

<input type="text" id="userInfo" name="UserInfo" size="40" />

Javascript 

const name = document.getElementById("userInfo").value;

Итак, окончательная рабочая версия вашего кода будет выглядеть примерно так: 

function Validate() {
  const name = document.getElementsByName("UserInfo")[0].value;
  if (!name) { // You can evaluate a variable simply with ! sign which is cover all '', null, and undefined instead of or operator
    alert('Please enter a name');
    return false;
  } else {
    alert('Name entered successfully');
    return true;
  }
}
<h2>A Simple Quiz</h2>
<fieldset>
  <legend>About You</legend>
  <p id="UserInfo">What is your name?</p>
  <div>
    <input type="text" name="UserInfo" size="40" />
    <button onclick="Validate()">Submit</button>
  </div>
</fieldset>

ПРИМЕЧАНИЕ: Я внес небольшие изменения в ваш код, чтобы соответствовать передовым методам.

0 голосов
/ 02 мая 2020

Вы проверяете, является ли name пустым или нулевым, но переменная name не определена, следовательно, она всегда выполняет остальную часть.

Ниже приведена рабочая модель вашего фрагмента. Я присвоил значение ввода для value и проверил наличие, сделайте предупреждение, если не верный ввод. 

function Validate(){
  const value = document.getElementsByName("UserInfo")[0].value;

  if(!value) {
    alert('Please enter a name');
    return false;
  } else {
    return true;
  }
}
<h2>A Simple Quiz</h2>
<form onsubmit="Validate()">
<fieldset>
	<legend>About You</legend>
  		<p id="UserInfo">What is your name?</p>
		<div>
			<input type="text" name="UserInfo" size="40" required />
      <button type="submit">Submit</button>
		</div>
  
</fieldset>
</form>

ОБНОВЛЕНИЕ: Использовать атрибут required.

Еще лучший подход - заключить в оболочку все элементы и отправить Нажмите кнопку внутри формы и добавьте атрибут required ко всем необходимым элементам. Обновленный ответ.

Требуется добавление, чтобы прервать отправку.

...