Question

我有三个下拉字段。我想在单击提交按钮时使用JavaScript验证它们，以查看是否未选中三个下拉字段中的任何值。

点击提交按钮时，它会显示一条警告消息，指出三个下拉列表中的一个尚未填写。

Answer 1

您是否尝试过利用required HTML标记的select属性而非使用JavaScript？

使用时，下拉字段应该看起来像这样：

<select required>
   <option value="">None</option>
   <option value="Opt1">Option 1</option>
   <option value="Opt2">Option 2</option>
   <option value="Opt3">Option 3</option>
   <option value="Opt4">Option 4</option>
</select>

以这种方式设置时，如果没有为该字段选择值定义选项，则无法为表单正文提交按钮。

Answer 2

根据我之前回答的评论中的信息，这应该适合您。我已对其进行了测试，但您可以优化JavaScript if语句以单独测试每个语句并为每个语句报告不同的消息，只要您始终return false;以确保提交已停止

function validateForm() {
  if (document.getElementById("ddOne").value == "" || document.getElementById("ddTwo").value == "" || document.getElementById("ddThree").value == "") {
    alert("You need to fill in all three dropboxes and not just some");
    return false;
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <form name="myForm" onsubmit="return validateForm()" method="post">
    <label>Dropdown 1</label>
    <select id="ddOne">
      <option value="">None</option>
      <option value="Opt1">Option 1</option>
      <option value="Opt2">Option 2</option>
      <option value="Opt3">Option 3</option>
      <option value="Opt4">Option 4</option>
    </select>
    <br />
    <label>Dropdown 2</label>
    <select id="ddTwo">
      <option value="">None</option>
      <option value="Opt1">Option 1</option>
      <option value="Opt2">Option 2</option>
      <option value="Opt3">Option 3</option>
      <option value="Opt4">Option 4</option>
    </select>
    <br />
    <label>Dropdown 3</label>
    <select id="ddThree">
      <option value="">None</option>
      <option value="Opt1">Option 1</option>
      <option value="Opt2">Option 2</option>
      <option value="Opt3">Option 3</option>
      <option value="Opt4">Option 4</option>
    </select>
    <br />
    <input type="submit" value="Submit">
  </form>

</body>

</html>

使用javascript在提交按钮单击下拉菜单中进行验证

2 个答案: