How can I limit the number of digits in a custom input field?

Manager2020
Tourist
20 0 2

I've added custom input field with type number, how can I limit the numbers to be 4 only?

MaxLength is not working

Manager2020_0-1713958049472.png

 

This is the code: (I added the code to have one input field of type text, and the other is of type number and this is the one I am asking about)

{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
  <p class="line-item-property__field" style="font-size: 13px;">
    <label for="{{ product_form_id }}-name">Type the Name. Maximum 5 characters</label>
    <br>
    <input form="{{ product_form_id }}" id="{{ product_form_id }}-name" type="text" name="properties[Name]" minlength="1" maxlength="5" style="width:100%; line-height: 40px; border:1px solid #333333;">
  </p>
{% endif %}

{% if product.metafields.custom.needsDate.value %}
  <p class="line-item-property__field" style="font-size: 13px;">
    <label for="{{ product_form_id }}-date">Type the Year. Maximum 4 numbers</label>
    <br>
    <input form="{{ product_form_id }}" id="{{ product_form_id }}-date" type="number" name="properties[Year]” minlength="4" maxlength="4" style="width:100%; line-height: 40px; border:1px solid #333333;" pattern="[1-9]\d{3}">
  </p>
{% endif  %}

 

Replies 5 (5)

LuffyOnePiece
Shopify Partner
543 80 98

Hi @Manager2020 

 

Replace the code with below one.

 

{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
  <p class="line-item-property__field" style="font-size: 13px;">
    <label for="{{ product_form_id }}-name">Type the Name. Maximum 5 characters</label>
    <br>
    <input form="{{ product_form_id }}" id="{{ product_form_id }}-name" type="text" name="properties[Name]" minlength="1" maxlength="5" style="width:100%; line-height: 40px; border:1px solid #333333;">
  </p>
{% endif %}

{% if product.metafields.custom.needsDate.value %}
  <p class="line-item-property__field" style="font-size: 13px;">
    <label for="{{ product_form_id }}-date">Type the Year. Exactly 4 numbers</label>
    <br>
    <input form="{{ product_form_id }}" id="{{ product_form_id }}-date" type="number" name="properties[Year]" min="1000" max="9999" style="width:100%; line-height: 40px; border:1px solid #333333;">
  </p>
{% endif %}

 


Please don't hesitate to reach out if you require further help to optimize or customize your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
Manager2020
Tourist
20 0 2

Thank you, 

but it is still not working.

LuffyOnePiece
Shopify Partner
543 80 98

Hi @Manager2020 ,

 

Can you provide me the access so that I can assist on fixing this?

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
Manager2020
Tourist
20 0 2

Thank you I will give you, but I had to change the field type to text again, as the number will not accept other numbers than English

Manager2020
Tourist
20 0 2

I gave you the access code by email