Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

Interactive Card Form with Vanilla JavaScript

accessibility, sass/scss
kxnzx•870
@kxnzx
A solution to the Interactive card details form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello Frontend Mentor Community I need some help with JavaScript!

I succeeded in the following:

  • mirroring the text from the input into the creditcard inscription
  • display of error messages when input is empty
  • create space after every four characters with input for cardnumber
  • prevent button from submitting by default

However, when I included the toggle function (to show the Thank You! Completion message after button has been clicked) the errors and the preventDefault() do not work anymore. How can I fix this?

I also wonder what input type to use for the cardnumber, month, year and cvc in HTML?

The REGEX that I used for the cardnumber does not function correctly either. How can I create the error when the wrong format has been entered?

Any help is much appreciated!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • David•7,960
    @DavidMorgade
    Posted almost 3 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

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub