Scribd
Upload
6 views

2b 1) Form Validation Using JS.pdf_displayName=2b 1) Form Validation Using JS

Uploaded by

aiphoneix70
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

2b 1) Form Validation Using JS.pdf_displayName=2b 1) Form Validation Using JS

Uploaded by

aiphoneix70
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

2b) Form Validation using JavaScript:

index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div class="input-group">
<label>Full Name</label>
<input type="text" placeholder="Enter your name" id="contact-name"
onkeyup="validateName()">
<span id="name-error"></span>
</div>
<div class="input-group">
<label>Phone No.</label>
<input type="tel" placeholder="123 456 7890" id="contact-phone"
onkeyup="validatePhone()">
<span id="phone-error"></span>
</div>
<div class="input-group">
<label>Email Id</label>
<input type="email" placeholder="Enter Email" id="contact-email"
onkeyup="validateEmail()">
<span id="email-error"></span>
</div>
<div class="input-group">
<label>Your Message</label>
<textarea rows="5" placeholder="Enter your message" id="contact-message"
onkeyup="validateMessage()"></textarea>
<span id="message-error"></span>
</div>
<button onclick="return validateForm()">Submit</button>
<span id="submit-error"></span>
</form>
<script src="script.js"></script>
</body>
</html>

style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
width: 100%;
height: 100vh;
background: #141a34;
display: flex;
align-items: center;
justify-content: center;
}
.container form {
width: 90%;
max-width: 500px;
padding: 50px 30px 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
position: relative;
}
.input-group {
width: 100%;
display: flex;
align-items: center;
margin: 10px 0;
position: relative;
}
.input-group label {
flex-basis: 28%;
}
.input-group input,
.input-group textarea {
flex-basis: 68%;
background: transparent;
border: 0;
outline: 0;
padding: 10px 0;
border-bottom: 1px solid #999;
color: #333;
font-size: 16px;
}
::placeholder {
font-size: 14px;
}
form button {
background: #141a34;
color: #fff;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.7);
padding: 10px 40px;
outline: 0;
cursor: pointer;
display: block;
margin: 30px auto 10px;
}
.input-group span {
position: absolute;
bottom: 12px;
right: 17px;
font-size: 14px;
color: red;
}
#submit-error {
color: crimson;
}
.input-group span i {
color: seagreen;
}

script.js
var nameError = document.getElementById("name-error");
var phoneError = document.getElementById("phone-error");
var emailError = document.getElementById("email-error");
var messageError = document.getElementById("message-error");
var submitError = document.getElementById("submit-error");
function validateName() {
var name = document.getElementById("contact-name").value;
if (name.length == 0) {
nameError.innerHTML = "Name is required";
return false;
}
if (!name.match(/^[A-Za-z]*\s{1}[A-za-z]*$/)) {
nameError.innerHTML = "Write full name";
return false;
}
nameError.innerHTML = 'valid';
return true;
}
function validatePhone() {
var phone = document.getElementById("contact-phone").value;
if (phone.length == 0) {
phoneError.innerHTML = "Phone no is required";
return false;
}
if (phone.length !== 10) {
phoneError.innerHTML = "Phone no should be 10 digits";
return false;
}
if (!phone.match(/^[0-9]{10}$/)) {
phoneError.innerHTML = "Only digits please";
return false;
}
phoneError.innerHTML = "valid";
return true;
}
function validateEmail() {
var email = document.getElementById("contact-email").value;
if (email.length == 0) {
emailError.innerHTML = "Email is required";
return false;
}
if (!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
emailError.innerHTML = "Email Invalid";
return false;
}
emailError.innerHTML = 'valid';
return true;
}
function validateMessage() {
var message = document.getElementById("contact-message").value;
var required = 30;
var left = required - message.length;
if (message.length == 0) {
messageError.innerHTML = "message is required";
return false;
}
if (left > 0) {
messageError.innerHTML = left + "more characters required";
return false;
}
messageError.innerHTML = "valid";
return true;
}
function validateForm() {
if (
!validateName() ||
!validatePhone() ||
!validateEmail() ||
!validateMessage()
) {
submitError.style.display = "block";
submitError.innerHTML = "Please fix error to submit";
setTimeout(function () {
submitError.style.display = "none";
}, 3000);
return false;
}
}

Sample Outputs:

You might also like