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
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
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