javascript - 修改 “Add to Cart” 按钮(表单)以要求选择变体

Question

我们的商店网站有几个产品页面，客户需要在点击“添加到购物车”之前选择尺寸或版本。如果他们忘记这样做，购物车会显示一条错误消息我们认为这导致了很多购物车被遗弃的问题。这是一个示例页面: https://www.easydigging.com/garden-hoes/grub-hoe.html

如果我们可以添加一些代码来实现以下功能，那就太好了:a) 如果未选择变体，则“添加到购物车”按钮将无法工作，并且b) 显示类似“您必须首先选择尺寸”的消息

你能告诉我如何修改下面的表单代码来创建这种效果吗？

如果没有，你有一个使用 html 和一点 JS 的简单解决方案吗？

我认为这篇旧文章可能有一些线索，但我不明白如何将其添加到我们的表单中...... Prevent to click "Add to Cart" button if specific product not selected - Shopify

以下是我们页面中当前的“添加到购物车”代码:

<form method="post" action="https://secure.easydigging.com/cgi-bin/UCEditor" >

  <input type="hidden" name="merchantId" value="TOOL" />
     <b class="pulsate">Select:</b>
     <select class="form-control" name="add" style="color:black; font-size:15px; width:140px; padding:5px; display:inline;">
                <option value="0" selected>Click for sizes</option>
                <option value="HOE-06-GRUB-1.390">6" wide: $42.95 </option>
                <option value="HOE-04-GRUB-1.390">4" wide: $42.95 </option>
     </select>

     <b>&nbsp; Qty:</b>
     <input class="form-control" style="color:black; font-size:15px; width:40px; text-align:center; display:inline;" type="text" name="quantity" value="1" />
     <br />			
     <input class="btn btn-sm btn-cart" type="submit" name="submit" value="Add To Cart" title="Buy a grub hoe." style="width:285px; font-size:18px; margin-top:14px; margin-left:2px; padding:5px;" />

</form>

Answer 1

你已经非常接近了!我在示例中添加了两个 HTML 属性并更改了第三个属性，以确保在用户单击提交之前必须从下拉列表中选择一个选项。

第一个更改是，我将“disabled”属性添加到默认选项元素中，以便表单不会让它被重新选择。我还将其值更改为空字符串，因为这有助于大多数浏览器了解该值无效。我们发现 Firefox 是唯一不需要空值的浏览器。除了 html5 表单验证之外，如果您想要对该 UI 进行更精细的控制，您还需要使用 JS。

• 参见this answer有关使用仅用于装饰的选项元素的提示。
• 和here是 MDN 关于必需属性的文档。
• Here's MDNs documentation on client-side form validation.
• Chrome 等要求禁用选项也具有空值，这里是 another answer我用来修复这个片段。

第二个更改，我向 select 元素添加了“required”属性，以便在做出选项之前无法提交表单。

<form method="post" action="https://secure.easydigging.com/cgi-bin/UCEditor" >
  <input type="hidden" name="merchantId" value="TOOL" />
  <b class="pulsate">Select:</b>
  <select class="form-control" name="add" style="color:black; font-size:15px; width:140px; padding:5px; display:inline;" required>
    <option value="" selected disabled>Click for sizes</option>
    <option value="HOE-06-GRUB-1.390">6" wide: $42.95 </option>
    <option value="HOE-04-GRUB-1.390">4" wide: $42.95 </option>
  </select>

  <b>&nbsp; Qty:</b>
  <input class="form-control" style="color:black; font-size:15px; width:40px; text-align:center; display:inline;" type="text" name="quantity" value="1" />
  <br />			
  <input class="btn btn-sm btn-cart" type="submit" name="submit" value="Add To Cart" title="Buy a grub hoe." style="width:285px; font-size:18px; margin-top:14px; margin-left:2px; padding:5px;" />
</form>

在最近的评论中，原发帖者问道:

One of the articles you linked suggests using required="required" instead of just required by itself. Before I start editing lots of pages, do you know if the format with = in the middle has any big advantages or disadvantages? Maybe on mobile browsers?

这是一个有趣的问题。看看我发布的两个 MDN 链接，只有一个将 required 分配给 required 的实例，即 required="required"。但哪种方式才是正确的呢？两个都!规范内容如下:

2.4.2 Boolean attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

综上所述，根据 HTML5 规范，两者都是 100% 有效。使用您喜欢的任何一个，除非它成为问题，否则不要担心。 (可能不会。)

• Spec for the required attrbiute
• Spec for boolean attributes.