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

Question

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

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

如何防止在文本框只有一个 space 作为已输入的唯一字符的情况下提交表单？

代码是 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

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;
}

Answer 2

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

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

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

在这个例子中：

\s表示空白字符class
\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 中获得格式完美的输入，而是付费客户。

如果我处在你的位置，我会试着理解为什么你的客户不想指定个性化而是用空格代替。

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

作为店主，我会让客户在任何字段中输入他们想要的任何内容，只要他们正在下订单并付款。在结帐路径上添加额外的障碍会损害转化渠道。

如果您真的希望您的客户使用个性化，请通过电子邮件或phone跟进他们在他们下单后并询问他们想要什么在那里告诉他们这是可选的，他们有时间思考。

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

How to prevent entering space only in a text field on Shopify website

html

javascript

validation

liquid

shopify