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

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

选择1
选择2
选择1
选择2

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

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

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

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

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

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

建议的解决方案 最方便的方法是使用由浏览器处理的HTML表单验证（

必需

） 如

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

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

添加第三个输入以回答您在评论中的问题。无值表示默认值为

标记的内容。仅当此选项中没有文本时，此选项才起作用

占位符
选择1
选择2
选择一个选项
选择1
选择2
如果未设置，则我是值
选择1
选择2

var selectElts=document.getElementsByTagName（'select'）；
var formElt=document.getElementById（“我的表单”）；
formElt.addEventListener（'submit'，函数（e）{
//停止表单提交
e、 预防默认值（）；
var误差=0；
//选中所有选择菜单
对于（变量i=0；i

您可以检查这些值是否为false，然后在submit事件侦听器中运行

event.preventDefault（）

这样它就不会提交了。我们可以查看一下。也许这符合你的问题。需要HTML5，为什么要重新发明轮子<代码>是。原因是我需要从多个select表单传递值。为了实现这一点，我在里面使用了属性form=“my_form”，我做了这样的工作，但不得不做一些不同的事情。首先，我去掉了“onchange”的括号，以便正确地调用事件。之后，我在函数中使用了getElementById，而不是getElementByName，并在函数中添加了de-correcated ID，这就是我想要的一切。感谢您给予正确的学分。不过，我在隐藏的占位符中看不到“value”属性的原因。这样做有什么特殊原因吗？它相当于

value=“

”。如果未设置任何值，则该值将与

之间的文本相同，如果未设置，则该值为
我现在看到的值。谢谢中的属性标题是否做了相同的事情？对于
标记，没有这样的属性。
<select name="form2" form="my_form" (onchange)="onItemSelected()">

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();
  } 
});