如果所选选项为空，如何防止提交？

Question

如果任何选定的菜单为空，我试图阻止使用 Onclick 事件（使用 javascript）提交。 也许显示警报。 是否可以？

<select name="form1" form="my_form">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<select name="form2" form="my_form">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<form id="my_form" method="post" action="selections.php">
    <input type="submit" value="Send">
</form>

Answer 1

建议的解决方案

最方便的方法是使用由epascarello提到的浏览器处理的 HTML 表单验证（ required ）

不幸的是，您的选择将第一个选项作为默认选项。 您可以只添加一个没有值的占位符选项。 这将防止在没有选择的情况下提交表单。

如果您不想显示它，您可以为用户隐藏此选项。 示例中的第二个选择。

在评论中添加了第三个输入来回答您的问题。 没有值意味着它将<option>标签的内容作为默认值。 只有在此选项中没有文本时，它才会起作用。

 <form id="my_form"> <select required name="form1" form="my_form"> <option value>Placeholder</option> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> </select> <select required name="form2" form="my_form"> <option hidden disabled selected value>Choose an option</option> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> </select> <select required name="form3" form="my_form"> <option>I'm the value if none set</option> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> </select> <input type="submit" value="Send"> </form>

Answer 2

我会为您的提交按钮使用一个 id：

<input type="submit" value="Send" id="submitButton" disabled>

之后只需为您的选项创建一个函数：

    function onItemSelected() {
       var selectedItem1 = document.getElementByName("form1").selectedIndex;
       var selectedItem2 = document.getElementByName("form2").selectedIndex;
       if (selectedItem1 && selectedItem2) {
         document.getElementById('submitButton').disabled = false;
       } else {
             document.getElementById('submitButton').disabled = true;
          }
        }

您必须在每个选择输入中调用 onItemSelected： 例如：

<select name="form2" form="my_form" (onchange)="onItemSelected()">

Answer 3

是的，如果菜单为空，您可以使用 select 标签中的 required 属性阻止提交表单。

Answer 4

您的选择输入不在您的“表单”标签中是否正常？ 在哪种情况下它们会是空的？ 因为默认选择了“选项 1”

Answer 5

var selectElts = document.getElementsByTagName('select');
var formElt = document.getElementById('my_form');

formElt.addEventListener('submit', function(e) {
  // stop the form submission
  e.preventDefault();
  var error = 0;

  // Check all select menus
  for (var i = 0; i < selectElts.length; i++) {
    // Check if current input's value is empty
    if (selectElts[i].value.trim() === '') {
      error = error + 1;
      alert(selectElts[i].name + ' is empty');
    }
  }

  // if there are no errors, then we submit the form
  if (error === 0) {
    formElt.submit();
  } 
});