Submitted about 3 years ago

Intro oomponent with sign up - Javascript

@distephano30

A solution to the Intro component with sign-up form challenge

Solution retrospective

Greeting guys, this is my solution for the form validation challenge. can you take a look and share with me how to improve it specially I need to validate the form after an error without refreshing the page. Your help will be appreciate. Thanks in advance

Code

Please log in to post a comment

Community feedback

Ting-Huei Chen•180

@hejkeikei

Posted about 3 years ago

Hi Stephane, For preventing refresh the page, you can use event.preventDefault(); in your event listener. MDN

Also, you can use getAttribute() so that you don't have to write things manually. In that case, you can use loop so you won't have to repeat your code:) For example:

<input type="text" name="fname" id="fname" placeholder="First Name" required/>

then you can do this:

const fields = document.querySelectorAll("input");
for(let i=0; i< fields.length-1; i++){
        if(fields[i].value==""){
            fields[i].nextElementSibling.innerHTML=fields[i].getAttribute("placeholder")+" cannot be empty";
            //output =>  First Name cannot be empty
        }else{
           fields[i].nextElementSibling.innerHTML="";
        }
    }

For detail information please see here

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