Validate inputs

Validating inputs and warning the user is an essential part of handing over your template to others users

The scenarios are plural and can quickly fork into multifold if you really want to get nitty gritty with what the users can and can't input.

The important thing here is to understand that the examples given here is only an small fraction of possibilities, and an unspecified number of validations and combinations can be made with this approach. These only serves as inspiration and are suggested to be combined with the Preview only tags for final results.

Character amount

In the event where you want to limit the amount of characters a user can input into a field, that could be in situations where the design gets ruined if they input more, you can use the following logic.

Simple warning

{% assign header_length = article.header_text | size %}

{% if header_length > 15 %}
<span style="color:red;">⚠️{{ article.header_text }}</span>
{% else %}
{{ article.header_text }}
{% endif %}

Remove excess

{% assign input = article.header_text | strip %}
{% assign input_length = input | size %}
{% assign truncated_input = input | slice: 0, 20 %}

{% if input_length > 20 %}
      <span style="color: red;">⚠️</span> {{ truncated_input }}
    {% else %}
  {{ truncated_input }}
{% endif %}

empty field

{%if article.header_text !='' %}

{{ article.header_text }}

{% endif %}

Character types

For some inputs you want to control if it's a number that can be inputted, or maybe some symbols or a sequence of specific characters that's present or not present.

Numbers only

{% assign input_value = article.header_text | strip %}
{% assign numbers_removed = input_value
  | replace: '0', '' | replace: '1', '' | replace: '2', '' | replace: '3', '' | replace: '4', ''
  | replace: '5', '' | replace: '6', '' | replace: '7', '' | replace: '8', '' | replace: '9', '' %}

{% if numbers_removed == "" and input_value != "" %}
  {{ input_value }}
{% else %}
  <span style="color: red;">⚠️ Only numbers allowed</span>
{% endif %}

Contains a specific wording or character

{% assign input = article.header_text | strip %}
{% assign input_start = input | slice: 0, 4 %}

{% if input_start == "http" %}
  ⚠️ No links allowed
{% elsif input contains "@" %}
  ⚠️ No email addresses allowed
{% else %}
  {{ input }}
{% endif %}