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 signup form using vanilla javascript

Rohitβ€’ 330

@Rohitgour03

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


Here is my solution to this challenge. πŸ”₯ I am facing a problem that I have stopped the form from submitting using e.preventDefault() but when all the entries are correctly filled, the form is not submitted, what should I add so that it gets submitted after filling in the correct inputs and the form will then be completely empty to fill the entries again??? And what about other things on which I can improve ? Please provide your valuable suggestion. πŸ™

Community feedback

P
Remus D. Buhaianuβ€’ 3,145

@Miculino

Posted

Hey @Rohitgour03

Congrats on completing the challenge. Your solution looks really good.

As @ayoam suggested, that could be a possible solution, but given your project, I don't think you'd actually want to submit the form. You can recreate the submit effect by emptying the inputs after you click the submit button.

Also, based on @ayoam suggestion, you don't need to write (allValid==true) - you can simply write if (allValid) as that variable will be converted to a boolean value automatically and checked for validity

Marked as helpful

1

Rohitβ€’ 330

@Rohitgour03

Posted

@Remus432 Thanks, buddy πŸ‘πŸ™ It's a really smart way of writing the conditional expression returning the boolean value. Thank you again for giving your feedback. πŸ”₯

0
Ayoub Amkhazzouβ€’ 280

@ayoam

Posted

Hey , well done!

to fix the issue , add a boolean variable that equals false after each setError(), then at the bottom of the function check if all input are valid then add form.submit().

function validateInputs(){

    let allValid = true;

     if (firstNameValue.length === 0) {

                setError(firstName, "First Name cannot be empty");

                allValid = false;

	     } else {

                setSuccess(firstName)

	}

...

if(allVAlid==true){form.submit();}	

}

hope this feedback helps.

Marked as helpful

1

Rohitβ€’ 330

@Rohitgour03

Posted

@ayoam , Thanks, Ayoub πŸ™ It's now working for me. Now I should practice including this type of flag-setting variable. This is a really good idea. πŸ”₯

1

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