未选择时如何提示消息？答案

【问题标题】：How to prompt the message when I didn't select?未选择时如何提示消息？
【发布时间】：2020-06-09 11:18:00
【问题描述】：

当我没有设置产品尺寸时，它会显示文字“必须为产品选择 1 尺寸”。但它不能显示文本。我想知道如何使用选择和输入元素？

<select name="product_size" class="form-control" required oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')">
    <option disabled selected>Select a Size</option>
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
</select>

enter image description here

【问题讨论】：

发布 javascript 代码。

标签： css validation input

【解决方案1】：

欢迎来到 StackOverflow！

您的代码有两处错误。

oninvalid 回调永远无法执行，因为从未检查过 select 元素的有效性。您可以通过将其包装在 form 元素中并在其中包含 <button> 来解决此问题。当用户单击此按钮时，浏览器会验证表单，将看到选择无效并调用您的 oninvalid 代码。
它在 chrome 中永远不会无效。我已经测试了你的代码，它在用表单包装后在 Firefox 上运行良好。然而，Chrome 并不认为您的默认选项是 invalid 以使其认为这是我添加的 value="" 属性。

一个工作示例：

<form action="javascript:void()">

  <select 
    required 
    name="product_size"
    class="form-control"
    oninput="setCustomValidity('')"
    oninvalid="setCustomValidity('Must pick 1 size for the product')"
  >
      <option value="" disabled selected>Select a Size</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
  </select>

  <button type="submit">Submit</button>
</form>

【讨论】：

谢谢，我的问题是 NO2。我添加了 value=" "，它在 Chrome 中有效。 @Max