修改“添加到购物车”按钮（表单）以要求选择变体

Question

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

如果我们可以添加一些代码，那就太好了： a) 如果变体尚未 selected，则阻止“添加到购物车”按钮工作，并且 b) 显示一条消息，例如“您必须先 select 一个尺码”

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

如果没有，您是否有使用 html 和一点 JS 的简单解决方案？

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

这是我们页面的当前 "Add to Cart" 代码：

<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: .95 </option>
                <option value="HOE-04-GRUB-1.390">4" wide: .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 属性并更改了第三个属性，以确保在用户单击提交之前必须从下拉列表中 select 编辑一个选项。

第一个更改，我将 'disabled' 属性添加到您的默认选项元素，这样表单就不会让它被重新 select 编辑。我还将其值更改为空字符串，因为这有助于大多数浏览器理解该值无效。我们发现 Firefox 是唯一不需要空值的浏览器。除了 html5 表单验证之外，如果你想更好地控制 UI，你将需要使用 JS。UI。

请参阅 this answer 了解有关拥有仅用于装饰的选项元素的提示。
而here是MDN关于required属性的文档。
Here's MDNs documentation on client-side form validation.
Chrome 等人也需要禁用选项才能具有空值，这是我用来修复此代码段的 another answer。

第二个更改，我将 'required' 属性添加到 select 元素，因此在做出该选项之前无法提交表单。

<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: .95 </option>
    <option value="HOE-04-GRUB-1.390">4" wide: .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% 有效的。使用您喜欢的任何一个，除非它成为问题，否则不要担心。（可能不会。）

修改“添加到购物车”按钮（表单）以要求选择变体

Modify “Add to Cart” button (form) to require selecting a variant

html

javascript

e-commerce