This project will give you a basic understanding of form validation using regex and some bootstrap functionality. Also at last timeout function is also applied. Hope you guys grab that as well.👍
--------------
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<title>Dragon Travels</title>
<style>
body{
background-color: teal;
}
.bodycss{
background-color: rgb(241, 219, 219);
}
</style>
</head>
<body>
<!-- success alert -->
<div class="alert alert-success alert-dismissible fade" id="success" role="alert">
<strong>Success!</strong> You request has been sumbitted.
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<!-- alert ends -->
<!-- failure alert -->
<div class="alert alert-danger alert-dismissible fade" id="failure" role="alert">
<strong>Failure!</strong> You fucked up somewhere. Recheck!!.
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<!-- failure alert ends -->
<div class="container my-4">
<h1> <span class="badge badge-secondary"> Dragon Travel </span> - Route to your destiny </h>
<hr />
</div>
<div class="container my-4 bodycss" >
<!--
<h2> <span class="badge badge-secondary"> Dragon Travel </span> - Route to your destiny </h2>
<h4><span class="badge badge-light"> Travel Form </span> </h4>
<hr /> -->
<h3><span class="badge badge-dark my-3" > Travel Form </span> </h3>
<!-- form -->
<form>
<div class="form-group" id="name1">
<label for="exampleFormControlInput1">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name"/>
<div class="invalid-feedback">
Please provide a valid name
</div>
<div class="valid-feedback">
Valid name entered
</div>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input
type="text"
class="form-control"
id="email"
placeholder="Email"
/>
<div class="invalid-feedback">
Please provide a valid email.Uppercase and lowercase English letters.Digits(0-9).Characters ! # $ % &' * + -
</div>
<div class="valid-feedback">
Valid email entered
</div>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Contact Number</label>
<input
type="text"
class="form-control"
id="phone"
placeholder="Phone Number"
/>
<div class="invalid-feedback">
Please provide a phone number with 10 digits from 0-9
</div>
<div class="valid-feedback">
Valid number entered
</div>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Select your car</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>Audi</option>
<option>Omni</option>
<option>Nano</option>
<option>i10</option>
<option>BMW</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Address</label>
<textarea
class="form-control"
id="address"
name="address"
rows="3"
></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">How should we improve</label>
<textarea
class="form-control"
id="address"
name="address"
rows="3"
></textarea>
</div>
</form>
<button class="btn btn-primary my-3" id ="submit">Submit</button>
</div>
<!-- form ends -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
<script src="index.js"></script>
</body>
</html>
index.js:
----------
console.log("this is index");
const name = document.getElementById("name");
const email = document.getElementById("email");
const phone = document.getElementById("phone");
$("#success").hide();
$("#failure").hide();
let validEmail = false;
let validPhone = false;
let validName = false;
name.addEventListener("blur", () => {
// console.log("name is blurred")
let regex = /^[a-zA-Z]([0-9a-zA-Z]){1,10}$/;
let str = name.value; // console.log(regex,str);
if (regex.test(str)) {
console.log("it matched");
name.classList.add("is-valid");
name.classList.remove("is-invalid");
validName = true;
} else {
console.log("not matched");
name.classList.add("is-invalid");
name.classList.remove("is-valid");
validName = false;
}
});
email.addEventListener("blur", () => {
// console.log("email is blurred");
let regex = /^([A-Za-z0-9._%+-]){2,20}@([A-Za-z0-9.-]){2,10}\.([a-zA-z]){2,7}$/;
let str = email.value; // console.log(regex,str);
if (regex.test(str)) {
console.log("it matched");
email.classList.add("is-valid");
email.classList.remove("is-invalid");
validEmail = true;
} else {
console.log("not matched");
email.classList.add("is-invalid");
email.classList.remove("is-valid");
validEmail = false;
}
});
phone.addEventListener("blur", () => {
console.log("phone is blurred");
let regex = /^([0-9]){10}$/;
let str = phone.value; // console.log(regex,str);
if (regex.test(str)) {
console.log("it matched");
phone.classList.add("is-valid");
phone.classList.remove("is-invalid");
validPhone = true;
} else {
console.log("not matched");
phone.classList.add("is-invalid");
phone.classList.remove("is-valid");
validPhone = false;
}
});
let submit = document.getElementById("submit");
submit.addEventListener("click", () => {
console.log("submit btn clicked");
let success = document.getElementById("success");
let failure = document.getElementById("failure");
if (validEmail && validName && validPhone) {
success.classList.add("show");
$("#success").show();
$("#failure").hide();
setTimeout(() => {
success.classList.remove("show");
}, 3000);
} else {
failure.classList.add("show");
$("#success").hide();
$("#failure").show();
setTimeout(() => {
failure.classList.remove("show");
}, 3000);
}
});
0 Comments