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

【问题标题】：How can I prevent submit if selected options are empty?如果所选选项为空，如何防止提交？
【发布时间】：2020-02-06 14:29:18
【问题描述】：

如果任何选定的菜单为空，我正在尝试阻止使用 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>

【问题讨论】：

您可以检查值是否为假，然后在提交事件侦听器中运行event.preventDefault()，这样它就不会提交
也许看看this。也许这符合你的问题。
需要HTML5，为什么要重新发明轮子？ <select required name=...

标签： javascript html forms select submit

【解决方案1】：

建议的解决方案

最方便的方法是使用浏览器处理的 HTML 表单验证 (required) 正如epascarello所提到的那样

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

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

添加了第三个输入以回答您在评论中的问题。没有值意味着它将默认为<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>

【讨论】：

这就是我要找的一切。感谢您给予正确的学分。不过，我看不到隐藏占位符处“值”属性的原因。这样做有什么特别的原因吗？
相当于value=""。如果不设置任何值，该值将与<option>I'm the value if none set</option>之间的文本相同
我现在明白了。谢谢！
<select> 标签没有这样的属性。 w3.org/TR/html52/sec-forms.html#the-select-element

【解决方案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()">

【讨论】：

我做了这样的工作，但不得不做一些不同的事情。首先，我从“onchange”中去掉括号以正确调用事件。之后我在函数中使用 getElementById 而不是 getElementByName 并在中添加了相应的 ID

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

是的。原因是我需要从多个选择表单中传递值。为了实现这一点，我在中使用了属性 form="my_form"

【解决方案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();
  } 
});

【讨论】：