Format Cart Attribute AND Validate Input. Help please

Technical Q&A
1

Hi. In Chile, we require a valid ID for item shipping. ID’s come in the form of 7-8 numbers, a hyphen, and a veritication digit. (Example: 12.345.678-8). I have managed to add a cart attribute to my Dawn 2.0 theme so that it asks for this ID on the cart page. Here’s the code I added to main-cart-items.liquid:

RUT

However, there are 2 other things I would like to do:

  1. Usually, on forms where this ID is required, the numbers will automatically be formatted so that the last digit goes after a “-”, and then every 3 digits go after a “.” . As an example, as I write “123456789”, the numbers would be formatted like “-1”, “1-2”, “12-3”, “123-4”, “1.234-5”, etc. Is there a way to do this? The reason for this is to be as clear as possible for clients.

  2. The last digit is actually not “random”, as its called a “verification digit” and has to follow a rule that has to do with the sum of the other digits. Is there a way I can add a formula for this to be checked? This is to prevent accidentally/intentionally provinding fake IDs, which would then be checked by the shipping company and I wouldn’t be allowed to make the shipment.

I appreciate any help with this. I have searched the forums and haven’t found anything, and this ID requirement is somewhat new to the country. Thanks a lot.

2

@lxortega

The solution should be relatively simple for you if you are familiar with JavaScript.

First you will want to disable the checkout buttons by default. You should be able to listen to the “input” or “change” event on the input element and modify its value when the customer types a character in. From there you can also check to see if the acceptable number of characters are in place. After you have determined that the input is of an acceptable length you would add your formula to ensure that the input is valid. If it is valid you will want to enable the checkout buttons.

There are JavaScript libraries that help with input masking and validation but I am currently unfamiliar with them.

Hope that helps!

3

Thanks for your answer Rob, it will be a great starting point in my research. I thought I had to do it via liquid and wasn’t finding anything…