Skip to content
Submitted about 2 years ago

Interactive card details form

lieneil•560
@NJVS
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I really enjoyed doing this challenge.

I use Javascript Promise for form validation. At first, I planned to write a simple function that returns true if there are no invalid inputs, but the problem is that after running this function, I'll need to add another if-statement inside the submit event to check if the function returns true. And I think that's a redundant code.

With Promise, I could just resolve it and pass the form data, or reject it and pass the invalid inputs and prevent the form from submitting. Tho this project prevents the default form submit even if there's an invalid input. I had intended to create reusable form validation, and I believe this is an excellent example of why using Promise is better than my initial solution.

I'm not sure if I did everything correctly, so if you have any suggestions, don't go easy on me, It really helps. Thaaaanks <3

Community feedback

  • Marcus Rangel•460
    @WebDevCamposPosted about 2 years ago

    Hi there! You have an amazing work! This very project was the most challenging for me so far and I noticed you have some issues that I've faced myself. See, in android devices the maxlength attribute doesn't work like in PCs. So I've found a pen that fixed that, by K-ro. Check it out and let me know if it helped you! Kind regards!! https://codepen.io/K-ro/pen/NPWBNO

    Marked as helpful
    2
    lieneil•560
    @NJVSPosted about 2 years ago

    Thanks @WebDevCampos. I test my solution and the maxlength i set on input card number still works fine even on phone. If it's okay, can you elaborate where you saw the bug? Its been months since i built this and I'm lost with my own codes. LOL

    0
    Marcus Rangel•460
    @WebDevCamposPosted about 2 years ago

    @NJVS When the user type, they can keep typing endlessly, because android SO only set the maxlength when you lost focus of input. So when I tested your solution on my phone, just yesterday, that problem occurred. Kind regards!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord