DEV Community

Nwafor Onyebuchi
Nwafor Onyebuchi

Posted on

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

Practice Exercise: Form Validation

Objective

Create a basic form with fields for name, email, and password. Implement JavaScript validation to ensure the fields are correctly filled out before submission. This a simple code-along project meant to get you started with basic form validation in JS.

Requirements

  1. HTML Form: Create an HTML form with inputs for name, email, and password.
  2. CSS Styling: Add basic styling to make the form look clean and user-friendly.
  3. JavaScript Validation: Implement JavaScript to validate the form fields.

Step-by-Step Instructions

Step 1: Set Up the HTML Structure

  1. Create a New HTML File

    • Create a new file named index.html.
  2. Add the HTML Boilerplate

    • Add the basic HTML boilerplate to your file:
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Form Validation</title>
         <link rel="stylesheet" href="styles.css">
     </head>
     <body>
         <form id="registrationForm">
             <h2>Registration Form</h2>
             <div>
                 <label for="name">Name:</label>
                 <input type="text" id="name" name="name">
                 <span id="nameError" class="error"></span>
             </div>
             <div>
                 <label for="email">Email:</label>
                 <input type="email" id="email" name="email">
                 <span id="emailError" class="error"></span>
             </div>
             <div>
                 <label for="password">Password:</label>
                 <input type="password" id="password" name="password">
                 <span id="passwordError" class="error"></span>
             </div>
             <button type="submit">Register</button>
         </form>
         <script src="script.js"></script>
     </body>
     </html>
    
  3. Add the Form Elements

    • Ensure your form includes fields for name, email, and password, each with a corresponding error message span.

Step 2: Add Basic CSS Styling

  1. Create a New CSS File

    • Create a new file named styles.css.
  2. Add Basic Styles

    • Add basic styles to make the form look clean and user-friendly:
     body {
         font-family: Arial, sans-serif;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #f4f4f4;
         margin: 0;
     }
    
     form {
         background: #fff;
         padding: 20px;
         border-radius: 8px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         max-width: 400px;
         width: 100%;
     }
    
     div {
         margin-bottom: 15px;
     }
    
     label {
         display: block;
         margin-bottom: 5px;
     }
    
     input {
         width: 100%;
         padding: 8px;
         box-sizing: border-box;
     }
    
     .error {
         color: red;
         font-size: 12px;
     }
    
     button {
         background-color: #007BFF;
         color: #fff;
         padding: 10px;
         border: none;
         border-radius: 5px;
         cursor: pointer;
     }
    
     button:hover {
         background-color: #0056b3;
     }
    

Step 3: Implement JavaScript Validation

  1. Create a New JavaScript File

    • Create a new file named script.js.
  2. Add Event Listener to Form

    • Add an event listener to the form to handle form submission:
     document.getElementById('registrationForm').addEventListener('submit', function(event) {
         event.preventDefault();
         validateForm();
     });
    
  3. Create the Validation Function

    • Add a function to validate the form fields:
     function validateForm() {
         // Clear previous error messages
         document.getElementById('nameError').innerText = '';
         document.getElementById('emailError').innerText = '';
         document.getElementById('passwordError').innerText = '';
    
         // Get form values
         const name = document.getElementById('name').value;
         const email = document.getElementById('email').value;
         const password = document.getElementById('password').value;
    
         // Validation flags
         let isValid = true;
    
         // Validate name
         if (name.trim() === '') {
             document.getElementById('nameError').innerText = 'Name is required';
             isValid = false;
         }
    
         // Validate email
         if (email.trim() === '') {
             document.getElementById('emailError').innerText = 'Email is required';
             isValid = false;
         } else if (!validateEmail(email)) {
             document.getElementById('emailError').innerText = 'Email is not valid';
             isValid = false;
         }
    
         // Validate password
         if (password.trim() === '') {
             document.getElementById('passwordError').innerText = 'Password is required';
             isValid = false;
         } else if (password.length < 6) {
             document.getElementById('passwordError').innerText = 'Password must be at least 6 characters';
             isValid = false;
         }
    
         // If all fields are valid, submit the form (for demonstration, we'll just alert a message)
         if (isValid) {
             alert('Form submitted successfully!');
         }
     }
    
     // Email validation function
     function validateEmail(email) {
         const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return re.test(String(email).toLowerCase());
     }
    

Step 4: Test the Form

  1. Open index.html in a Browser
    • Open your HTML file in a web browser to test the form validation.
    • Try submitting the form with different inputs to ensure the validation works as expected.

Feel free to play around with the code and express your creativity.

Happy coding!

Top comments (3)

Collapse
 
greenersoft profile image
GreenerSoft

All this JavaScript is useless.

You need to use HTML5's built-in form validation.

And therefore add the "required" attribute to input elements and the "minlength" attribute to the password's input element.

In addition, we must not forget that the most important thing is server-side validation.

Collapse
 
buchilazarus4 profile image
Nwafor Onyebuchi

Thank you for your comment @greenersoft. The article isn't so much about form validation as it is about providing beginners with a resource to practice their coding skills. There is a lot for beginners to learn here, especially on DOM traversal. Cheers!

Collapse
 
greenersoft profile image
GreenerSoft

I understand the pedagogical idea, but in this case you'd have to come up with other examples that don't involve bad practice.