Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro-Component-With-Sign-Up-Form using HTML,CSS & vanilla JavaScript

Abhilash 920

@Chiku100

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How do I remove errors when I start to fill the form after getting errors due to empty input and other feedback also helps a lot :)

Community feedback

Laharl 1,000

@UrbanskiDev

Posted

Hello Abhilash !

Congratulation for finishing your project

To remove the errors when the form is filled, you can use the same idea than you used for showing the errors !

The code you use to show an error :

document.querySelector(".def").classList.remove("error");

To remove an error, you just have to add the class again !

document.querySelector(".def").classList.add("error");

I hope it helps you, keep learning and happy coding !

0

Abhilash 920

@Chiku100

Posted

@UrbanskiDev Hi Laharl! Thanks for the reply. Is there any way I can remove the error as soon as I start typing?

0
Laharl 1,000

@UrbanskiDev

Posted

@Chiku100

It is possible to remove the error as soon as you start typing !

For that, you can use the oninput event ! The event linked fires up as soon as the user type inside the input box.

I have found a documentation which can helps you to apply it :

A quick basic example could be :

HTML

<input id="firstname" name="firstame" type="text" placeholder="First Name" oninput=testLength(this.value)>

Javascript

function testLength(val){
if(val.length !== 0){
     document.querySelector(".def").classList.add("error");
 }
}

I hope it answer your question !

Marked as helpful

1
Abhilash 920

@Chiku100

Posted

@UrbanskiDev It's working. Thanks a lot for helping me out :)

1

@dazzlerabhi30800

Posted

you can use onchange property on each input

0

Please log in to post a comment

Log in with GitHub
Discord logo

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