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

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

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

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

代码是流动的，因为它是一个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>

在下面键入您想要的个性化设置：

{{'products.product.add_-to_-cart'|t}

HTML:

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

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

---

您是否考虑过使用普通HTML5表单验证

如果要禁止完全由空格字符组成的值：

在本例中：

• \s

  表示空白字符类

• \s*

  匹配任意数量的空白字符（不包括任何字符）

• [^\s]+

  在至少一个非空白字符的序列上匹配
• 最后的

  \s*

  匹配输入末尾的任何空格

组合起来，用户可以输入除空字符串和完全由空白组成的字符串以外的任何内容

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

请参阅此处的文档：

p.S.请务必思考您试图解决的业务问题。您的最终目标可能不是在CRM中获得格式完美的输入，而是付费客户

如果我站在你的立场上，我会试图理解为什么你的客户不想指定个性化设置，而是要设置空间

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

作为一个店主，我会让顾客在任何领域都随心所欲，只要他们下订单并付款。在结帐路径上增加额外的障碍将损害转换漏斗

---

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

向我们展示您的代码，以便我们可以帮助您您的后端是什么，或者您如何提交此表单？在前端进行验证不是最安全的。您是否看到如果您的客户不希望他们的产品/购买被个性化，为什么要强制他们？这个问题与你问的编程问题无关，但我确实认为你或企业主需要考虑问题。Ivand，我会设法在那一刻做这件事。Zsolt，代码是流动的，因为它是Shopify电子商务商店。Sonal，是的，但这与客户只进入一个空间而不进入其他空间并不完全相同。David，这很复杂，但由于产品的性质，输入框相关的文本行确实需要至少包含1个字符（不仅仅是空格），感谢@或anasaag，但这似乎可以防止完全输入空格。我想让用户能够在单词之间输入空格，而不仅仅是在文本框中输入空格作为唯一字符。嘿，更新了我的答案，希望它能起作用。谢谢@或anasaag。听你这么说应该很好。很高兴提供帮助，请投票并将答案标记为已接受。谢谢，祝你好运：）谢谢。最后一个问题。为了在用户只在文本框中输入空格时向用户显示对话框消息，以下命令是正确的：

code

function validate（）{var text=document.getElementById（“第1-0-0行”）.value；if（！text.replace（/\s/g，）.length）{alert（“此行不能留空”）；return false；}return true；}请阅读@masted75对我答案的评论，他想验证输入的不仅仅是空格。谢谢，@OrAssayag。更新了答案