Vue, Pinia, and TailwindCSS

Community feedback

• 

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 1 year ago

  Wow! Nice work, I loved the feature of scanning the card you added, but:

  1. There's an issue with the "Card number"" expiration year" checks, even with the correct input, it keeps showing the error message.
  2. After every 4 numbers for the card number input field you can add an extra line of space.
  3. You can also restrict card name to letters only, card number, expiration date, and CVC to numbers only.
  4. You can use the maxlength attribute in you input fields to restrict the length of the input field.. for example CVC input field will have a maxlength` of 3.

  These are my suggestions, great work once again!

  Marked as helpful

  0

  ---

  

  fkrunic•310

  @fkrunicPosted about 1 year ago

  I appreciate the feedback Assurance! I've updated the auto-complete properties of the card input fields so that the entire credit card form can be auto-filled. As for some of the specifics

  1. The years are restricted to '23' through '27', and so are not full four-digit calendar years. This input field didn't have a length restriction, so entering invalid years were definitely possible. I just tested the live version and it seems to work, but if you are still facing issues, please let me know!
  2. Great suggestion! This has been added.
  3. I forgot about restricting the name input to letters only- thank you for flagging this! The validators for the other fields are in src/app.ts; I don't include any type specifications on the input HTML elements because it doesn't actually restrict bad input, and the app handles form submission via Pinia so a JavaScript/TypeScript validation approach seemed better.
  4. I didn't know about this, thank you! Length restrictions have been added to all the input fields.

  0

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 1 year ago

  @fkrunic ooh that's great! You are welcome, I'm glad I could be of help

  0