Need Help with custom input field -> Error Message

Technical Q&A
1

Hello,

I have a custom input field on my store that features and error message whenever a value is added that is outside a defined range. Unfortunately, this error message only shows once, when opening another product, it doesn’t display. See here: https://cln.sh/nPnMmq

This is the theme: https://t1eaf314p3qr0jzv-28767944738.shopifypreview.com

And this is the code section:

{% if product %}
   window.addEventListener('DOMContentLoaded', function(e) {
    var product = document.querySelector('#ProductSection-{{ product.id }}');
    initCustomLength(product);
    initSelectors(product);
   });
  {% endif %}
  
  document.addEventListener('quickview:loaded', function(evt) {
    var product = document.querySelector('#ProductSection-' + evt.detail.productId);
    initCustomLength(product);
    initSelectors(product);
  });
  
  function initCustomLength(product) {
    product.querySelector('[data-select-option="{{ 'products.product.custom_length_field_name' | t }}"]').addEventListener('change', function(e) {
      var option = this.getAttribute('data-select-option');
      var optionValue = this.value;
      var customLength = product.querySelector('.custom-length');
      var lengthInput = product.querySelector('.custom-length-input');
      var lengthProperty = product.querySelector('.custom-length-input-property');
      var addToCart = product.querySelector('[data-add-to-cart]');

      if (option == '{{ 'products.product.custom_length_field_name' | t }}') {
        lengthInput.value = '';
        lengthProperty.value = '';
        if (optionValue == '{{ 'products.product.custom_length_field_name_value' | t }}') {
          customLength.classList.remove('hide'); 
          customLength.classList.add('show'); 
          addToCart.disabled = true;
        } else {
          customLength.classList.remove('show'); 
          customLength.classList.add('hide'); 
          addToCart.disabled = false;
        }
      }
    });
  
    product.querySelector('.custom-length-input').addEventListener('focusout', function(e) {
      var inputValue = this.value;
      var lengthInputUnit = document.querySelector('.custom-length-input-unit');
      var lengthProperty = document.querySelector('.custom-length-input-property');

      if (inputValue != '') {
        lengthInputUnit.style.display = 'flex';
        lengthProperty.value = inputValue;
      } else {
        lengthInputUnit.style.display = 'none';
        lengthProperty.value = '';
      }
    });
  
    product.querySelector('.custom-length-input').addEventListener('focusin', function(e) {
      var lengthInputUnit = document.querySelector('.custom-length-input-unit');
      document.querySelector('.custom-length-input-unit').style.display = 'flex';
    });
  
    product.querySelector('.add-to-cart').addEventListener('click', function(e) {
      var errorMsg = product.querySelector('.custom-length-error');
      var customLength = product.querySelector('.custom-length');
      var lengthInput = product.querySelector('.custom-length-input');
      var addToCart = product.querySelector('[data-add-to-cart]');

      if (customLength.classList.contains('show') && !errorMsg.classList.contains('hide') || customLength.classList.contains('show') && lengthInput.value == '') {
        e.preventDefault();
      }
    });
  }
  
  function checkCustomLength(val) {
    var errorMsg = product.querySelector('.custom-length-error');
    var addToCart = product.querySelector('[data-add-to-cart]');

    if(val<10 || val>180){
      errorMsg.classList.remove('hide');
      addToCart.disabled = true;
    }else{
      errorMsg.classList.add('hide');
      addToCart.disabled = false;
    }
  }

Best regards