Struggle Form Card Validation CSS Vanilla Javascript

Community feedback

• 

  Wonk•120

  @Wonkers0Posted almost 2 years ago

  Hello 👋

  I've looked through your solution and it looks like there's some issues with your implementation, but no worries! 😇

  First, I like your front end code, it looks like you incorporated the design correctly; However on the mobile version the cards are positioned relative to the left side of the screen, so on slightly wider phones or tablets they won't be centered (see image): https://imgur.com/a/YGheFTg

  This is because of the following styles that you've added to the cards: .card_back { left: 3em; top: 1em; }

  and

  .card_front { left: 0; top: 6em; }

  Here is what you can add to position the cards correctly: https://pastebin.com/BidqgFUp (Frontend Mentor refuses to format the code correctly so view it on pastebin)

  Also, you were supposed to update the details on the image cards to be the same as the ones in the form using javascript, but if you chose not to then I understand 👍

  Finally, it seems that I cannot submit the form; Whenever I try I can see the confirmation menu appear and disappear instantly; This might be caused by your usage of html forms, maybe try having the confirm button at the bottom of the form as a button element instead of an input of type "form-submit", and then validate the form using an "onclick" event on the button.

  Best of luck, and if you have any questions, don't hesitate to ask! 🙋‍♂️

  Marked as helpful

  0

  ---

  

  Jelissa S•80

  @LunarianDreamPosted almost 2 years ago

  @Wonkers0 Thanks for assisting. I went back and reworked some of my code to try to pinpoint where the issue was exactly. It turns out, that since I had form.submit() in the validation; that's what was causing the screen to flash really quickly. So I removed that.

  So, the form is working correctly. . . only if you enter everything correctly the first time. If you make an error then the form won't submit once you click Confirm a second time. I'm not sure how to fix that though.

  0