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
- HTML Form: Create an HTML form with inputs for name, email, and password.
- CSS Styling: Add basic styling to make the form look clean and user-friendly.
- JavaScript Validation: Implement JavaScript to validate the form fields.
Step-by-Step Instructions
Step 1: Set Up the HTML Structure
-
Create a New HTML File
- Create a new file named
index.html.
- Create a new file named
-
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> -
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
-
Create a New CSS File
- Create a new file named
styles.css.
- Create a new file named
-
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
-
Create a New JavaScript File
- Create a new file named
script.js.
- Create a new file named
-
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(); }); -
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
-
Open
index.htmlin 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)
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.
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!
I understand the pedagogical idea, but in this case you'd have to come up with other examples that don't involve bad practice.