Form Validation
About this Note
Content
Contact Form — HTML / CSS / JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet"
href="./style.css"> -->
<style>
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e0eafc, #cfdef3);
}
button {
border: none;
background: linear-gradient(135deg, rgb(224, 234, 252), rgb(207, 222, 243));
;
}
.container {
width: 100%;
max-width: 520px;
background: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: 0.3s;
}
.container:hover {
transform: translateY(-3px);
}
h1 {
font-size: 2rem;
text-align: center;
margin-bottom: 2rem;
font-weight: 700;
color: #333;
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
width: 100%;
border-radius: 10px;
padding: 10px 12px;
border: 1px solid #ddd;
margin-bottom: 1.5rem;
outline: none;
transition: 0.3s;
font-size: 15px;
}
input:focus,
textarea:focus,
select:focus {
border-color: #4a90e2;
box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
}
.genderGroup,
.colorGroup {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin-top: 6px;
background-color: #f5f7fa;
border-radius: 8px;
transition: 0.2s;
}
.genderGroup:hover,
.colorGroup:hover {
background-color: #eaf3ff;
}
.genderGroup input,
.colorGroup input {
width: 16px;
height: 16px;
cursor: pointer;
}
.errorSms {
font-size: 13px;
color: #ff4d4d;
display: block;
margin-bottom: 5px;
}
.message {
margin-top: 2rem;
}
.submitArea {
display: flex;
justify-content: center;
margin-top: 10px;
}
.submitBtn {
background: linear-gradient(135deg, #4a90e2, #007bff);
padding: 10px 25px;
border-radius: 30px;
border: none;
color: white;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
.submitBtn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
}
body.dark-mode {
background: linear-gradient(135deg, #0f172a, #1e293b);
}
body.dark-mode button {
background: linear-gradient(135deg, #0f172a, #1e293b);
}
body.dark-mode .container {
background: #1e293b;
color: #d1dae3;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
body.dark-mode h1 {
color: #dee2e6;
}
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
background: #0f172a;
color: #d5dade;
border: 1px solid rgba(255, 255, 255, 0.15);
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
color: #94a3b8;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
border-color: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
body.dark-mode .genderGroup,
body.dark-mode .colorGroup {
background: rgba(255, 255, 255, 0.05);
color: #e2e8f0;
}
body.dark-mode .genderGroup:hover,
body.dark-mode .colorGroup:hover {
background: rgba(56, 189, 248, 0.1);
}
body.dark-mode .genderGroup input,
body.dark-mode .colorGroup input {
accent-color: #38bdf8;
}
body.dark-mode .errorSms {
color: #f87171;
}
body.dark-mode .submitBtn {
background: linear-gradient(135deg, #38bdf8, #2563eb);
}
body.dark-mode .submitBtn:hover {
box-shadow: 0 10px 25px rgba(56, 189, 248, 0.3);
}
</style>
</head>
<body>
<main>
<button id="themeBtn">🌙 </button>
<form action="#" onsubmit="sendMessage(event)" class="container">
<h1>Contact Form</h1>
<div class="row">
<div class="col-6">
<label for="name">Name</label>
<span class="errorSms" id="nameError"></span>
<input type="text" name="name" id="name">
</div>
<div class="col-6">
<label for="email">Email:</label>
<span class="errorSms" id="emailError"></span>
<input type="email" name="email" id="email">
</div>
<div class="col-6">
<label for="phone">Phone</label>
<span class="errorSms" id="phoneError"></span>
<input type="number" name="phone" id="phone">
</div>
<div class="col-6">
<label for="subject">Subject</label>
<span class="errorSms" id="subjectError"></span>
<input type="text" name="subject" id="subject">
</div>
</div>
<div class="row">
<div class="col-4">
<label>Gender</label>
<div class="errorSms" id="genderError"></div>
<div class="genderGroup">
<input type="radio" name="gender" id="">
<span>Male</span>
</div>
<div class="genderGroup">
<input type="radio" name="gender" id="">
<span>Female</span>
</div>
<div class="genderGroup">
<input type="radio" name="gender" id="">
<span>Others</span>
</div>
</div>
<div class="col-4">
<label>Color</label>
<div class="errorSms" id="colorsError"></div>
<div class="colorGroup">
<input type="checkbox" name="colors" id="">
<label for="red">Red</label>
</div>
<div class="colorGroup">
<input type="checkbox" name="colors" id="">
<label for="green">Green</label>
</div>
<div class="colorGroup">
<input type="checkbox" name="colors" id="">
<label for="blue">Blue</label>
</div>
</div>
<div class="col-4">
<label for="country">Country</label>
<div class="errorSms" id="countryError"></div>
<select name="country" id="country">
<option value="">Nepal</option>
<option value="">India</option>
<option value="">Chaina</option>
<option value="">America</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 message">
<label for="message">Message</label>
<textarea name="message"></textarea>
</div>
<div class="col-12 d-flex submitArea">
<button type="submit" class="submitBtn">Submit</button>
</div>
</div>
</form>
</main>
<script>
function sendMessage(event) {
event.preventDefault();
let name = document.getElementById("name").value;
if (name === "") {
document.getElementById("nameError").innerHTML = "* Required";
} else {
document.getElementById("nameError").innerHTML = "";
console.log("Message sent by", name);
}
//email
let email = document.getElementById("email").value;
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === "" || !emailPattern.test(email)) {
document.getElementById("emailError").innerHTML = "* valid email";
} else {
document.getElementById("emailError").innerHTML = "";
console.log("message send by", email);
}
// phone
let phone = document.getElementById("phone").value;
if (phone === "") {
document.getElementById("phoneError").innerHTML = "* required";
} else {
document.getElementById("phoneError").innerHTML = "";
}
// subject
let subject = document.getElementById("subject").value;
if (subject === "") {
document.getElementById("subjectError").innerHTML = "* required.";
} else {
document.getElementById("subjectError").innerHTML = "";
console.log("form send by:", subject)
}
// gender
let gender = document.querySelector('input[name="gender"]:checked');
if (!gender) {
document.getElementById('genderError').innerText =
'* required';
isValid = false;
}
// color
let colors = document.querySelectorAll('input[name="colors"]:checked');
if (colors.length === 0) {
document.getElementById('colorsError').innerText =
'* minimum 1';
isValid = false;
}
// country
let country = document.getElementById('country').value;
if (country === '') {
document.getElementById('countryError').innerText =
'* required';
isValid = false;
}
}
let theme = document.getElementById("themeBtn");
theme.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
theme.textContent = "☀️";
} else {
theme.textContent = "🌙";
}
})
</script>
</body>
</html>
