WELLCOME BACK
H
ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..
তো এই পোসে যে কোডটি দিবো আশা করি thumbnail দেখে বুঝে গেছেন। যদি না বুঝেন তাহলে বলি যে এই পোস্ট Form Validation Javascript কোড শেয়ার করবো।
আপনি এটি কোনো কোডিং ছাড়া করতে যান আপনার ওয়েবসাইট এ তাহলে আপনাকে Plugin ব্যবহার করতে হবে কিন্তু আপনি নিশ্চিই যানেন যে Plugin এ Pro system থাকে তাই সব সিস্টেম দেয় না।
যদি আপনি নিজেই তৈরি করেন তাহলে নিজের ও ভালো লাগবে এবং মনের মতো করতে পারবেন।
তো চলুন শুরু করা যাক।
Webpage Demo Link:
Unnamed
Unnamed
| ⓘ |
কোড কপি লিংক না এবার পুরো Files ই দিয়ে দিচ্ছি, আশা করি এবার কারো কোনো সমস্যা হবে না। |
index.html
Form Validation in HTML
thank-you.html
এটি আপনি চাইলে যোগ করতেও পারেন/Sign up ফরম করলে বাদ দিয়ে দিবেন।
Thanks page
style.css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } body { display: flex; align-items: center; justify-content: center; padding: 0 10px; min-height: 100vh; background: #1BB295; } form { padding: 25px; background: #fff; max-width: 500px; width: 100%; border-radius: 7px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); } form h2 { font-size: 27px; text-align: center; margin: 0px 0 30px; } form .form-group { margin-bottom: 15px; position: relative; } form label { display: block; font-size: 15px; margin-bottom: 7px; } form input, form select { height: 45px; padding: 10px; width: 100%; font-size: 15px; outline: none; background: #fff; border-radius: 3px; border: 1px solid #bfbfbf; } form input:focus, form select:focus { border-color: #9a9a9a; } form input.error, form select.error { border-color: #f91919; background: #f9f0f1; } form small { font-size: 14px; margin-top: 5px; display: block; color: #f91919; } form .password i { position: absolute; right: 0px; height: 45px; top: 28px; font-size: 13px; line-height: 45px; width: 45px; cursor: pointer; color: #939393; text-align: center; } .submit-btn { margin-top: 30px; } .submit-btn input { color: white; border: none; height: auto; font-size: 16px; padding: 13px 0; border-radius: 5px; cursor: pointer; font-weight: 500; text-align: center; background: #1BB295; transition: 0.2s ease; } .submit-btn input:hover { background: #179b81; }
script.js
// Selecting form and input elements
const form = document.querySelector("form");
const passwordInput = document.getElementById("password");
const passToggleBtn = document.getElementById("pass-toggle-btn");
// Function to display error messages
const showError = (field, errorText) => {
field.classList.add("error");
const errorElement = document.createElement("small");
errorElement.classList.add("error-text");
errorElement.innerText = errorText;
field.closest(".form-group").appendChild(errorElement);
}
// Function to handle form submission
const handleFormData = (e) => {
e.preventDefault();
// Retrieving input elements
const fullnameInput = document.getElementById("fullname");
const emailInput = document.getElementById("email");
const dateInput = document.getElementById("date");
const genderInput = document.getElementById("gender");
// Getting trimmed values from input fields
const fullname = fullnameInput.value.trim();
const email = emailInput.value.trim();
const password = passwordInput.value.trim();
const date = dateInput.value;
const gender = genderInput.value;
// Regular expression pattern for email validation
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
// Clearing previous error messages
document.querySelectorAll(".form-group .error").forEach(field => field.classList.remove("error"));
document.querySelectorAll(".error-text").forEach(errorText => errorText.remove());
// Performing validation checks
if (fullname === "") {
showError(fullnameInput, "Enter your full name");
}
if (!emailPattern.test(email)) {
showError(emailInput, "Enter a valid email address");
}
if (password === "") {
showError(passwordInput, "Enter your password");
}
if (date === "") {
showError(dateInput, "Select your date of birth");
}
if (gender === "") {
showError(genderInput, "Select your gender");
}
// Checking for any remaining errors before form submission
const errorInputs = document.querySelectorAll(".form-group .error");
if (errorInputs.length > 0) return;
// Submitting the form
form.submit();
}
// Toggling password visibility
passToggleBtn.addEventListener('click', () => {
passToggleBtn.className = passwordInput.type === "password" ? "fa-solid fa-eye-slash" : "fa-solid fa-eye";
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
});
// Handling form submission event
form.addEventListener("submit", handleFormData);
THE END
S
o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.
