search

AlaskaAirlines / auro-input

Custom HTML element for inputting string data in forms
https://auro.alaskaair.com/components/auro/input
Apache License 2.0
2 stars 4 forks source link

Credit card validation issues #163

Closed blackfalcon closed 1 week ago

blackfalcon commented 2 years ago

Describe the bug

This issue will report two bugs within the same area of functionality.

  1. the current validation configs incorrectly support cards starting with either a 1 or a 2. When starting with a 1 or a 2 the validation will consider the card correct after only 2 numbers are entered.

To Reproduce issue 1

Steps to reproduce the behavior:

  1. Go to credit card demo
  2. In any credit-card field enter 1
  3. Tab out of the input - notice that the input will error
  4. Tab back into the input and enter a second 1
  5. Notice that the error state is removed and the value is considered valid.

issue_01

To Reproduce issue 2

  1. Go to credit card demo
  2. In any credit-card field enter 3434 44444
  3. Click on the x
  4. Notice that the input has an error, but the value is not actually cleared

issue_02

Expected behavior

All credit cards should validate at the correct minimum numbers required. All credit card values should be cleared by clicking the x.

Additional context

With some investigation, the first issue has to do with this section of code. By only using the formatMinLength value, the validation sequence is not attributed to the DOM correctly.

https://github.com/AlaskaAirlines/auro-input/blob/0ebc7192a8f88c09f9049cf4f2576848b0aa8b6b/src/base-input.js#L699-L712

For the second issue, reference these lines. It appears that when using only the formatLength value, this breaks the clearing function. This also means that the clearing function is not working on any sequence, just used 34 as an example.

https://github.com/AlaskaAirlines/auro-input/blob/0ebc7192a8f88c09f9049cf4f2576848b0aa8b6b/src/base-input.js#L720-L726

jason-capsule42 commented 2 years ago

I don't think this is going to be CC specific... I suspect that the issue has to do with the logic for when we remove the error state generally in auro-input. This will require more debugging but I am willing to gamble that the issue is in that part of the logic.

blackfalcon commented 2 years ago

@jason-capsule42 it's not CC specific.

For the second issue, reference these lines. It appears that when using only the formatLength value, this breaks the clearing function. This also means that the clearing function is not working on any sequence, just used 34 as an example.

jordanjones243 commented 5 months ago

The second bug listed in this issue is no longer valid. This can be validated by following the steps shown above.

Patrick-Daly-AA commented 3 weeks ago

Needs validation in the Input Beta Branch

jordanjones243 commented 1 week ago

Neither of these bugs are no longer valid, as they have been tested and no longer exist. This issue will not be closed.