JavaScript验证，用于检查是否选择了单选按钮

JavaScript validation to check if a radio button is selected?

本文关键字：选择 单选按钮 是否 检查 验证 用于 JavaScript      更新时间：2023-09-26

我有以下表格：

<form name="form" action="contact_submit.php" onsubmit="return validateForm()"
method="post">
<h2>Your Name</h2>
<input type="text" name="name">
<h2>Your E-mail Address</h2>
<input type="text" name="email" />
<h2>Phone Number</h2>
<input type="text" name="phone" />
<h2>Your Message</h2>
<input type="text" name="message" width="300px" height="200px" />
<h2>Preferred Contact?</h2>
<input type="radio" name="contact" value="email" id="email-pref">Email
<input type="radio" name="contact" value="phone" id="phone-pref"> Phone
<input type="submit" value="Submit">
</form>

提交后，将执行以下JavaScript代码（在validateForm（）函数中）：

if (document.getElementByID("email-pref").checked == true ||    
document.getElementByID("phone-pref").checked == true) {
alert("poopoo");
return false;
}
else {
alert("Contact preference must be filled out");
return false;
}

当我检查其中一个按钮或不检查任何按钮时，表单仍然是提交的，但所有其他验证语句似乎都有效。它不工作是有原因的吗？或者你能建议一种更好的方法来检查是否至少选择了一个单选按钮吗？谢谢

JavaScript区分大小写。是getElementById而不是getElementByID。

如果按名称引用单选按钮，则不需要getElementById（因此可以删除ID属性）。使用this:将对表单的引用传递给侦听器

<form ... onsubmit="return validateForm(this)" ...>

则在功能引用中，按名称列出无线电组：

function validateForm(form) {
    var contacts = form.contact;
    if (contacts[0].checked || contacts[1].checked) {
      // one or the other is checked
    } else {
      // neither is checked
    }
    // more validation ...
}

然而，当使用单选按钮时，您可以默认选中一个，然后您可以确保在发布表单时选中一个：

  <input type="radio" name="contact" value="email" checked>Email
  <input type="radio" name="contact" value="phone"> Phone

现在，您不需要验证是否选中了一个。

相关文章：