Interactive Card Details Form using React

Community feedback

• 

  Mason Boomgaard•180

  @MasonBoomPosted about 2 years ago

  Hello,

  I decided to take a look at your project. Although it is very well done, there is a little bit of room for improvement.

  The maximum character limit works, but there is nothing set up for minimum character limits. you could solve this problem by doing something like this: if(name ==="" || cvc.length < 3 || mm.length < 2 || yy.length < 2 || cardNumber < 16 { alert('invalid inputs') } else { // insert handle submit logic here } I also noticed that in the cvc, exp dates and card number inputs, it allows me to type letter characters. this problem can be solved by adding these parameters in your input tags:

  inputmode="numeric" pattern="[0-9]*"

  the mobile responsiveness needs some work too (particularly between widths 700px and 1000px)

  Marked as helpful

  1

  ---

  

  nitesik•760

  @nitesikPosted about 2 years ago

  @MasonBoom Hey, thanks alot for your help. Couldn't find a way to add a max limit in my type=number so left it at tel or text. I'll use your way from now on. And thanks again!

  1

  

  Mason Boomgaard•180

  @MasonBoomPosted about 2 years ago

  @nihisx No problem

  1