If you just started learning javascript or are a beginner in javascript. This post will help you to polish your javascript knowledge. I have shared a simple javascript matching checker.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<title>Form With JS Validate</title>
</head>
<body>
<div class="form-area">
<form id="form">
<div class="form-group">
<input type="password" placeholder="password" id="password" class="form-control" required>
<small id="warning"></small>
</div>
<div class="form-group">
<input type="password" placeholder="confirm password" id="confirm-password" class="form-control" required>
<small id="warning"></small>
</div>
<div class="form-group">
<input type="submit" id="submit-btn" class="btn btn-primary w-100" value="Submit">
</div>
<p id="success-message">Congratulation!</p>
</form>
</div>
<script src="./assets/js/script.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,600&display=swap');
body {
height: 100vh;
background-image: linear-gradient(
80deg,
hsl(0deg 0% 100%) 0%,
hsl(240deg 67% 99%) 11%,
hsl(227deg 69% 97%) 22%,
hsl(230deg 60% 96%) 33%,
hsl(226deg 63% 95%) 44%,
hsl(229deg 64% 94%) 56%,
hsl(226deg 65% 92%) 67%,
hsl(228deg 62% 91%) 78%,
hsl(226deg 63% 89%) 89%,
hsl(227deg 63% 88%) 100%
);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 1;
margin: 0;
color:green ;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.form-area {
background-color: #ffffff;
width: 400px;
padding: 35px 30px 25px;
border-radius: 10px;
margin-bottom: 20px;
}
.form-area #success-message {
margin-top: 30px;
text-align: center;
display: none;
}
.form-control {
border: 2px solid #f2f3f7;
background: #f3f4f9;
}
.form-control:focus {
box-shadow: 0 0 0 0 transparent;
}
.form-group {
margin-bottom: 10px;
}
.form-group .warning {
color: rgb(223, 74, 74);
}
.form-group label {
margin-bottom: 5px;
color: #434344;
}
.form-group.error input{
border-color: rgb(255, 62, 62);
}
.form-group.success #warning{
display: none;
}
.form-group.error #warning {
visibility: visible;
}
.form-group #warning {
color: rgb(255, 62, 62);
font-weight: 600;
visibility: hidden;
}
.btn-primary {
background: #3568e7;
}
JS
const form = document.getElementById('form');
const password = document.getElementById('password');
const password_confirm = document.getElementById('confirm-password');
const success = document.getElementById('success-message');
// Show Error Message
const showError = (input) => {
const form_group = input.parentElement;
form_group.className = "form-group error";
const warning = form_group.querySelector("small");
warning.innerText = "Password do not match";
success.style.display = "none";
}
// Show Success Message
const showSuccess = (input) => {
const form_group = input.parentElement;
form_group.className = "form-group success";
success.style.display = "block";
}
// Check Password Match
const checkPassword = (input1, input2) => {
if(input1.value !== input2.value){
showError(input2);
}
else {
showSuccess( input2);
}
}
// Handle Form Validation
form.addEventListener('submit', function (e){
e.preventDefault();
checkPassword(password, password_confirm);
});