Password matching check using JavaScript

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);
});

rafikadir

rafikadir

Password matching check using JavaScript

HTML

CSS

JS