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

A HTML , CSS and JAVASCRIPT basic client site for form validation

Pappyjayโ€ข 170

@Manifoldbit

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys, here is my first project using JavaScript for form validation, kindly look through my codes and let me know if it is well structured and designed. I await your feedback. Thanks

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

  • Your form validation logic is solid, but for better code organization, consider separating your CSS styles from the JavaScript logic. Create a CSS class with the desired styles, and then use JavaScript to add or remove that class. This helps maintain a cleaner structure and makes it easier to manage styles.

    Here's an example:

    CSS:

    .error {
      border: 1px solid red;
    }
    
    .success {
      border: 1px solid green;
    }
    

    Your JavaScript

    if (!emailField.value.match(/^[A-Za-z\._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
        emailError.classList.add('error');
        return false;
      } else {
        emailError.classList.remove('error');
        emailField.classList.add('success');
        return true;
      }
    

Happy coding!

Marked as helpful

0

Pappyjayโ€ข 170

@Manifoldbit

Posted

@MelvinAguilar .. Thanks so much.. i really appreciate.. i will make adjustments

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