Welcome folks today in this blog post we will be implementing multi-step html5 form input fields validation and will be showing the custom error messages in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
`
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<style> .form { display: flex; flex-direction: column; align-items: center; margin: auto; max-width: 600px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .step { display: none; } .step.active { display: flex; flex-direction: column; align-items: center; } .error { border: 2px solid red; } .error-message { color: red; margin-top: 5px; } </style> <form id="myForm" class="form" novalidate> <div class="step active"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <span id="name-error" class="error-message"></span> <button type="button" class="next">Next</button> </div> <div class="step"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <span id="email-error" class="error-message"></span> <button type="button" class="prev">Previous</button> <button type="button" class="next">Next</button> </div> <div class="step"> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <span id="password-error" class="error-message"></span> <button type="button" class="prev">Previous</button> <button type="button" class="next">Next</button> </div> <div class="step"> <label for="address">Address:</label> <input type="text" id="address" name="address" required> <span id="address-error" class="error-message"></span> <button type="button" class="prev">Previous</button> <button type="submit">Submit</button> </div> </form> |
As you can see we have four input fields in each step firstly we allow the user to enter the username and then we allow the user to enter the email address and password in the next step and lastly we enter the address in the final step. And then we have the submit button to submit the details of the user. And also we are styling the form using custom css.
And now we need to write the javascript code to implement the form validation as shown below
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
const form = document.getElementById("myForm"); const steps = form.querySelectorAll(".step"); const nameInput = form.querySelector("#name"); const emailInput = form.querySelector("#email"); const passwordInput = form.querySelector("#password"); const addressInput = form.querySelector("#address"); // Show the first step initially showStep(0); // Handle "Next" button clicks form.addEventListener("click", function (event) { if (event.target.classList.contains("next")) { const currentStep = event.target.closest(".step"); const nextStep = currentStep.nextElementSibling; if (validateStep(currentStep)) { showStep(Array.from(steps).indexOf(nextStep)); } } }); // Handle "Previous" button clicks form.addEventListener("click", function (event) { if (event.target.classList.contains("prev")) { const currentStep = event.target.closest(".step"); const prevStep = currentStep.previousElementSibling; showStep(Array.from(steps).indexOf(prevStep)); } }); // Handle form submissions form.addEventListener("submit", function (event) { event.preventDefault(); if (validateForm()) { alert("Form submitted successfully!"); } }); // Function to show a given step function showStep(index) { // Hide all steps for (let step of steps) { step.classList.remove("active"); } // Show the given step steps[index].classList.add("active"); } // Function to validate a single step // Function to validate a single step function validateStep(step) { let isValid = true; // Reset errors const errorMessages = step.querySelectorAll(".error-message"); for (let errorMessage of errorMessages) { errorMessage.textContent = ""; } // Validate inputs const inputs = step.querySelectorAll("input"); for (let input of inputs) { if (input.checkValidity()) { input.classList.remove("error"); } else { input.classList.add("error"); isValid = false; // Display error message const errorMessage = step.querySelector(`#${input.id}-error`); errorMessage.textContent = input.validationMessage; } } return isValid; } // Function to validate the entire form function validateForm() { let isValid = true; // Validate each step for (let i = 0; i < steps.length; i++) { if (!validateStep(steps[i])) { isValid = false; showStep(i); //break; } } return isValid; } // Email validation using regular expression emailInput.addEventListener("input", function () { if (emailInput.checkValidity()) { emailInput.classList.remove("error"); document.querySelector("#email-error").textContent = ""; } else { emailInput.classList.add("error"); document.querySelector("#email-error").textContent = "Please enter a valid email address"; } }); |
As you can see we are getting all the references of all the dom elements and then we are attaching the event listeners to the input elements and then we are validating the data for each step and then showing the custom error messages.
