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

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

建议的解决方案

最方便的方法是使用由epascarellorequired提到的浏览器 ( )处理的 HTML 表单验证

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

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

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