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是否为空或null，但变量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属性。

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

添加所需内容将中止提交本身。