Interactive Card Form with Vanilla JavaScript

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello man, just checked your code as you asked me, I already sent you a pull request on Github so you can see the changes, but let me try to explain what I did here and what you should avoid for your future projects:

  The first thing that take me more time to figure out is why the form wasn't submitting, I was clicking the button adding console logs in your form and they weren't working, and then I noticed that the main problem wasn't in your JS files, was in your HTML.

  You were trying to submit the form using a html <button>, I just changed it to <input type='submit'> and now the form was submitting.

  The other main problem was that you were using an html function call onclick this is a really bad practice that can cause you a lot of problems (look how your form wasn't working correctly), you should use your confirm() function inside your form submission, not onclick because you want it to execute when your form is submitted, not when the button is clicked.

  Other major change that I did was adding your confirm() function to your form submit but only executing it when no error message was displayed, like this:

    const isThereAnyError = document.querySelector('.error');
    if(isThereAnyError) return;
    confirm();
  

  I was selecting errors, if there are no error classes around the isThereAnyError will be undefined wich means false wich causes your form to stop executing and return, if there were no error classes your form will keep going and will use the confirm() function.

  Moved all your validate functions to the top for readable reasons, you were using them before calling them.

  Added a better regex for 16 card numbers check.

  • Recomendations for future projects:

  Instead of using a lot of if else checkers, try selecting all the input at once and do the validation with a loop checking the type and adding the errors, this is a little bit harder than the solution you got, it will come with time don't worry.

  Use more modern syntax that will make your code much more readable, ternay operators, logical && or || operators, try making your code more dinamic!, no pressure on this, just practice and read a lof of documentation / watch more ES6+ content.

  • Still missing on your JS some things:

  Validate that the year and month are digits and not letters. Validate CVC is a digit of 3 numbers.

  Hope my feedback helps you! it helped me improve to review your code and trying to fix it I think that now I'm a bit more confident on my mentoring, thank you for letting me try!

  Edit:

  Also added some coments on my pull request changes if you want to understand it better, your comments really helped me understand the functionality of your code and find the bug

  Marked as helpful

  0

  ---

  

  kxnzx•870

  @kxnzxPosted about 2 years ago

  @DavidMorgade Thank you so much for your feedback and the adjustments! JavaScript is at this stage incomprehensible for me. You managed to made it clear for me to understand. You are a great mentor! Much appreciated! Thank you for your time. Greetings Kenza

  1