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

user_14726463 0
Viewed 731

I have input text boxes on my website to allow products to be personalised.

The fields must contain some text but some customers workaround this by just entering a space and submitting the form. This is a problem as the personalisation can't be left blank and has to be some text value, even if it's just a dot or a hyphen, for example.

How do I prevent the form being submitted where the text box only has a single space as the only character that has been entered?

The code is Liquid as it's a Shopify e-commerce store

    <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>
shopify liquid validation html javascript
2 Answers

Have you considered using plain HTML5 form validation?

If you want to disallow value consisting entirely from whitespace characters:

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

In this example:

  • \s means whitespace character class
  • \s* matches any number of whitespace characters (including no characters at all)
  • [^\s]+ matches at sequence of at least one non-whitespace character
  • and the final \s* matches any whitespace in the end of the input

Combined they allow user to enter anything except empty string and a string consisting entirely from whitespace.

Alternatively, if you want users to use only Latin letters:

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

see documentation here: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#Validating_against_a_regular_expression

P.S. please do think about the business problem that you are trying to solve. Your end goal is probably not to get the perfectly formatted input in your CRM but paying customers.

If I were in your shoes I'd try to understand why your customers do not want to specify personalisation and put spaces instead.

Maybe they don't need it? Maybe they do not care? Maybe they don't want to think or not sure what to specify when making an order? Maybe they need time to think? Maybe they are not willing to commit to specific phrasing just yet?

As a shop owner, I'd let customer put whatever they want in any field as long as they are making an order and paying for it. Adding extra hurdles on the checkout path will hurt the conversion funnel.

If you really want your customers to use personalisation, follow up with them via email or phone after they make an order and ask them what they want to put in there and tell them that this is optional and they have time to think.

user_74174020

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