JS表单验证，以确保如果没有输入名字，就会出现一个弹出窗口。

Question

我的想法是，当用户看到 "What is your name "框时，如果他们没有填写，就会弹出一条消息说 "请输入你的名字"。

我不明白为什么表单不返回弹出窗口，因为我调用了正确的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>

Answer 1

你正在检查 name 为空或空，但变量 name 没有定义，因此它总是执行 else 部分。

下面是你的snippet的工作模型，我把输入值分配给了 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>

UPDATE。使用 required 属性。

更好的方法是将所有的元素和提交按钮封装在表单中，并在表单中添加 required 属性的所有必要元素。更新了答案。

添加required会中止提交本身。