An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Mashable
- Techcrunch
- Simplebits
- The Logo Smith
- Smashing Magazine
- My Ink Blog
- 24 Ways
- Specky Boy
- Daily Now
- The Verge
Help Webnuz
Referal links:
March 24, 2022 11:42 pm GMT
Original Link: https://dev.to/elvissautet/simple-html-tailwindcss-javascript-form-validation-485e
Simple HTML, TAILWINDCSS & Javascript Form Validation
In this simple tutorial, i am going to share a complete guide in creating a simple advanced validation form.
Why did i use JS/Why i do
I love using javascript alot since am a full stack web developer. I only use it in any type of application developemnt and it just works like magic to me.
I recenly started using tailwindcss but in this tutorial, i did not take my time working on so much styling but the code on my github account will be updated and added more functionalities as time goes by.
The Html code:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="./index.css"> <title>FORM VALIDATION</title> </head> <body> <div class="min-h-screen bg-slate-900 min-h-screen flex items-center justify-center" > <div class="backdrop-blur-sm bg-white/80 p-5 max-w-md w-full rounded-md shadow-white/10 shadow-sm" > <form id="login" class="text-black text-md flex flex-col space-y-3" autocomplete="off" > <div class="flex flex-col w-full space-y-3 tracking-wide"> <label class="text-lg tracking-wide font-mono" for="firstName"></label> First Name</label > <input type="text" name="firstName" id="firstName" class="border-2 firstName w-full p-2 rounded-lg focus:outine-none focus:outline-none" autocomplete="off" aria-autocomplete="off" /> <span class="block firstNameError text-red-500 text-xs hidden">error</span> </div> <div lass="flex flex-col w-full space-y-3 tracking-wide"> <label class="text-lg tracking-wide font-mono" for="firstName"> Last Name</label > <input type="text" name="lastName" id="lastName" class="border-2 lastName w-full p-2 rounded-lg focus:outine-none focus:outline-none" autocomplete="off" /> <span class="block lastNameError text-red-500 text-xs hidden">error</span> </div> <div lass="flex flex-col w-full space-y-3 tracking-wide"> <label class="text-lg tracking-wide font-mono" for="email"> Your Email</label> <input type="text" name="email" id="email" class="border-2 email w-full p-2 rounded-lg focus:outine-none focus:outline-none" autocomplete="off" /> <span class="block emailError text-red-500 text-xs hidden">error</span> </div> <div class=""> <input value="Login Now" type="submit" id="btn" class="px-4 py-3 mt-5 rounded-md bg-slate-600 w-full text-white tracking-wide transition-all duration-300 ease-in-out hover:bg-slate-900 cursor-pointer disabled:cursor-not-allowed disabled:opacity-20"/> </div> </form> </div> </div> <script src="./index.js"></script> </body></html>The Javascript Code:
const firstNameInput = document.getElementById("firstName");const lastNameInput = document.getElementById("lastName");const emailInput = document.getElementById("email");const buttonSubmit = document.getElementById("btn");const form = document.getElementById("login");const firstNameError = document.getElementsByClassName("firstNameError")[0];const lastNameError = document.getElementsByClassName("lastNameError")[0];const emailError = document.getElementsByClassName("emailError")[0];//define and declare and empty errors objectlet error = {};/* This is a JavaScript event listener. It is a way to listen for an event. In this case, it islistening for the form to be submitted. */form.addEventListener("submit", function (e) { e.preventDefault();//function to validate the form fields before submitting checkEmpty();});// validate empty fields and set error objectfunction checkEmpty() { //loop and remove all key and value fields in the errors object for (let key in error) { delete error[key]; } //set all in firstname, lastname, email spans to display none firstNameError.style.display = "none"; lastNameError.style.display = "none"; emailError.style.display = "none"; //remove all the error class "border-red-500 classes" firstNameInput.classList.remove("border-red-500"); lastNameInput.classList.remove("border-red-500"); emailInput.classList.remove("border-red-500");//remove white spaces from every input Field const firstNameValue = firstNameInput.value.trim(); const lastNameValue = lastNameInput.value.trim(); const emailValue = emailInput.value.trim(); //check if all inputs are empty then add new new error keys to the defined error object if (firstNameValue === "") { error.firstName = "First Name is required"; } if (lastNameValue === "") { error.lastName = "Last Name is required"; } if (emailValue === "") { error.email = "Email is required"; } //validate the inputs firstName and lastName if (firstNameValue !== "") { if (!firstNameValue.match(/^[a-zA-Z0-9]+$/)) { error.firstName = "First Name must be letters only"; } } if (lastNameValue !== "") { if (!lastNameValue.match(/^[a-zA-Z0-9]+$/)) { error.lastName = "Last Name must be letters only"; } } if (emailValue !== "") { //validating an email if (!emailValue.match(/^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/)) { error.email = "Email must be a valid email"; } } //if we have error add the error to the error message if (Object.keys(error).length > 0) { displayError(); } else { //submit the form with a delay of 2 seconds //change the button innerText to submitting and add no-cursor class and disabled attribute to it buttonSubmit.value = "Submitting..."; buttonSubmit.setAttribute("disabled", "disabled");//set a delay of 2 seconds since we dont have an api endpoint to send the data to just mimic the process new Promise(function (resolve, reject) { setTimeout(function () { resolve(submitForm()); }, 2000); }); }}//display errors respectivey to the span html classesfunction displayError() { //set all errors to their respectivey and also changing hidden error containers to be a block. if (error.firstName) { firstNameInput.classList.add("border-red-500"); firstNameError.style.display = "block"; firstNameError.innerHTML = error.firstName; } if (error.lastName) { lastNameInput.classList.add("border-red-500"); lastNameError.style.display = "block"; lastNameError.innerHTML = error.lastName; } if (error.email) { //loop over the classes and add other classes emailInput.classList.add("border-red-500"); emailError.style.display = "block"; emailError.innerHTML = error.email; }}//submitting the formfunction submitForm() {//TODO: Add an API ENDPOINT to send the data. //show the values for now but later we going to add some api intergration console.log(firstNameInput.value); console.log(lastNameInput.value); console.log(emailInput.value); //reset the login buttonSubmit//after 2 seconds is over change the input type button innerText and remove the disabled attribute. buttonSubmit.value = "Login Now"; buttonSubmit.removeAttribute("disabled"); //reset the form and clear all fields form.reset();}Original Link: https://dev.to/elvissautet/simple-html-tailwindcss-javascript-form-validation-485e
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To