Input field maxlength and minlength are not working

Store Design
, , , ,
1

I am adding two input fields to allow the customer to customize the product with name and year.

I am using the maxlength and minlength attributes in the input field to restrect the number of characters, but when I test the product will be added without any restrictions?

Another thing is how can I restrict the input field value to be only numbers?

This is the code I placed it in the custom liquid section in the product template.

{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
  <p class="line-item-property__field" style="font-size: 12px;”>
    <label for="{{ product-form_id }}-name">Type the Name</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>
<p style=“font-size: 0.1rem; margin-bottom: 15px;”> </p>
{% endif %}
{% if product.metafields.custom.needsDate.value %}
  <p class="line-item-property__field" style="font-size: 12px;”>
    <label for="{{ product-form_id }}-date">Type the Year</label>
    <br>
    <input form="{{ product_form_id }}" id="{{ product-form_id }}-date" type="text" name="properties[Year]" minlength=“4” maxlength=“4” style="width:100%; line-height: 40px; border:1px solid #333333;”>
  </p>
<p style=“font-size: 0.1rem; margin-bottom: 15px;”> </p>
{% endif  %}
2

Hi @Manager2020 ,

Here is the updated code. Can you please try this one?

{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
  

    
    

    
  

  

 

{% endif %}
{% if product.metafields.custom.needsDate.value %}
  

    
    

    
  

  

 

{% endif  %}

If you require further help to optimize or customize your store, please don’t hesitate to reach out. 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

3

Thank you very much,

It is working, but for the Year field, how can I limit the input to be numbers only?

4

Hi @Manager2020 ,

You can consider utilizing the Easify Product Options app’s free plan to incorporate the Name field (using the Text Box option type) and Year field (using the Numbox option type). You can effortlessly set parameters such as text length or minimum/maximum values for these fields.

5

Hi @Manager2020

Can you please add the below code?

{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
  

    
    

    
  

  

 

{% endif %}
{% if product.metafields.custom.needsDate.value %}
  

    
    

    
  

  

 

{% endif  %}

If you require further help to optimize or customize your store, please don’t hesitate to reach out. 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

6

Thank you very much,

But it is still accepting letters.

I am pasting my code as I changed it little bit.

{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
  

    
    

    
  

{% endif %}

{% if product.metafields.custom.needsDate.value %}
  

    
    

    
  

{% endif  %}
7

Hi @Manager2020 ,

Change the input type to the number.

{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
  

    
    

    
  

{% endif %}

{% if product.metafields.custom.needsDate.value %}
  

    
    

    
  

{% endif  %}

Thanks

8

Thank you very much,

Now it will only accept numbers, however the maxLength and minLength seems not working?