Submitted 4 months ago

Newsletter sign up form with custom validation

Srijan Manandhar• 450

@srijanss

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I got to learn about,

The aria-live attribute to make my form more accessible. This is announce the error messages who is using assistive technologies.
Creating gradients and different configurations related to it.
FormData and how it can be used to get user input from the form. It's really neat and handy feature.

What challenges did you encounter, and how did you overcome them?

Since there was only one input element of type email, I tried to use Constraint validation API to validate the form. And I tried to use :invalid , :focus:invalid pseudo states of input in CSS. As I have required attribute present in the input, it set the :invalid state for the input element on page load. So, invalid state related CSS was always showing in my app. So, to fix that I remove :invalid related CSS and used .invalid class instead to handle valid and invalid states from JS.

What specific areas of your project would you like help with?

Open for feedback

Community feedback

1deadjoe• 260

@1deadjoe

Posted 4 months ago

This solution is very neat and close-to-perfect. I like the transitions you have used. How do you get the input to clear after dismissing the message?

Srijan Manandhar• 450

@srijanss

Posted 4 months ago

@1deadjoe

Thanks for the feedback.

I've used Javascript to clear the text on input

dismissMessageBtn.addEventListener("click", () => {
  emailInput.value = "";
  toggleFormAndSuccessMessageVisibility();
});

Hope this helps. Happy coding.

Please log in to post a comment

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