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

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

我会为您的提交按钮使用一个 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;
          }
        }

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

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

Answer 2

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

Answer 3

您的 select 输入不在您的 'form' 标签中是否正常？在什么情况下它们会是空的？因为 'option 1' 默认为 selected

Answer 4

建议的解决方案

最方便的方法是使用 HTML 由浏览器处理的表单验证 (required) 如epascarello

所述

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

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

添加了第三个输入来回答您在评论中的问题。没有值意味着它将 <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 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();
  } 
});

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

How can I prevent submit if selected options are empty?

html

javascript

forms

select

submit

建议的解决方案