如何防止仅在 Shopify 网站上的文本字段中输入空格

Question

我在我的网站上输入了文本框，以便对产品进行个性化设置。

这些字段必须包含一些文本，但一些客户只需输入一个空格并提交表单即可解决此问题。这是一个问题，因为个性化不能留空并且必须是一些文本值，即使它只是一个点或连字符，例如。

如果文本框只有一个空格作为已输入的唯一字符，如何防止提交表单？

代码是 Liquid，因为它是 Shopify 电子商务商店

    <div class="personalisation_label">
    <p>Type the personalisation you want below:</p>
    </div>
    <div class="personalisation">
    <input type="text" name="properties[Line 1]" id="Line 1-0-0" maxlength="12" size="12">
    <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
    <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    </button>
    </div>

Answer 1

您是否考虑过使用纯 HTML5 表单验证？

如果您想禁止完全由空白字符组成的值：

<input type="text" name="properties[Line 1]" id="Line 1-0-0" maxlength="12" size="12"
       pattern="\s*[^\s]+\s*" />

在这个例子中：

• \s 表示空白字符类
• \s* 匹配任意数量的空白字符（包括完全没有字符）
• [^\s]+ 匹配至少一个非空白字符的序列
• 最后的 \s* 匹配输入末尾的任何空格

结合它们允许用户输入除空字符串和完全由空格组成的字符串之外的任何内容。

或者，如果您希望用户只使用拉丁字母：

<input type="text" name="properties[Line 1]" id="Line 1-0-0" maxlength="12" size="12"
       pattern="[a-zA-Z]+" />

在此处查看文档： https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#Validating_against_a_regular_expression

P.S.请考虑一下您要解决的业务问题。您的最终目标可能不是在您的 CRM 中获得格式完美的输入，而是付费客户。

如果我站在你的立场上，我会试着理解为什么你的客户不想指定个性化并改为放置空间。

也许他们不需要它？也许他们不在乎？也许他们不想考虑或不确定在下订单时要指定什么？也许他们需要时间思考？也许他们还不愿意承诺具体的措辞？

作为店主，只要客户下订单并付款，我就可以让客户在任何领域放置他们想要的任何东西。在结帐路径上添加额外的障碍会损害转化渠道。

如果您真的希望您的客户使用个性化服务，请在在他们下订单后通过电子邮件或电话与他们联系，并询问他们想在其中放入什么并告诉他们这是可选的他们有时间思考。

Answer 2

HTML：

<button type="submit" name="add" id="AddToCart" onclick="return validate();" ... rest of the HTML

JavaScript：

function validate() {
   var text = document.getElementById("Line 1-0-0").value;
   if (!text.replace(/\s/g, '').length) {
       return false;
   }
   return true;
}