You are currently viewing Confirm Password validation in JavaScript

Confirm Password validation in JavaScript

Confirm Password validation in JavaScript

Confirm password validation in JavaScript
Confirm password validation in JavaScript

 

Welcome to The CodeWithRandom blog. In this blog, we learn how to create a Password Validation Using JavaScript.
We use If / Else to Check Password Validation Using JavaScript.

Following paremeters must be needed in confirm password validation
1)  First letter of the password should be capital.
2)  Password must contain a special character (@, $, !, &, etc).
3)  Password length must be greater than 8 characters.
4)  One of the most important that the password fields should not be empty.

I hope you enjoy our blog so let’s start with a basic HTML Structure for Password Validation Input.

HTML Code For Password Validation

<!DOCTYPE html>
<html>
    <head>
        <title>Tip Calculator</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <!-- Main Part -->
        <div class="container">
            <!-- Form Start For Password -->
            <form action="#">
                <!-- 1st Input Of Password -->
                <input type="password" class="password" id="password" placeholder="your password" onkeyup='check()'>
                <!-- 2nd Input Of Password -->
            <input type="password" id="checkPassword" class="password" placeholder="confirm your password" onkeyup='check()'>
            <!-- Paragraph indicate -->
            <p id="alertPassword"></p>
            </form>
            </div>
        <!-- js is here -->
        <script src="app.js"></script>
    </body>
</html>

There is all the HTML Code for the Password Validation Input. Now, you can see an output with Only html code. Then we write CSS Code to style Our Input Field of password and Add JavaScript Code To Check and Confirm Password.

Html Code Output

Confirm Password validation in JavaScript
Confirm Password validation in JavaScript

CSS Code For Password Validation

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,900&display=swap');
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100vh;
background: #232323;
display: flex;
justify-content: center;
align-items: center;
}
form {
flex-direction: column;
display: flex;
width: 500px;
}
.row {
position: relative;
}
input.password {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid #fff;
padding: 0 0 20px 0;
margin-top: 50px;
font-family: 'Poppins';
color: #fff;
outline: none;
font-size: 16px;
letter-spacing: 2px;
}
span {
width: 100%;
display: flex;
margin: 20px 0px 0px 0px;
font-family: 'Poppins';
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
display: flex;
align-items: center
}
i, .far {
margin-right: 15px
}

Html + CSS Updated Output

Confirm Password validation in JavaScript
Confirm Password validation in JavaScript

JavaScript Code For Password Validation

// Check Function Start

var check = function() {

    // We use If ,Else For password
    // if password value same = to checkPassword
    if (document.getElementById('password').value ==  document.getElementById('checkPassword').value)
    
    // then run this function
    {
    document.getElementById('alertPassword').style.color = '#8CC63E';
    document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-check-circle"></i>Match !</span>';
    }
        // OtherWise run this function
    else {
    document.getElementById('alertPassword').style.color = '#EE2B39';
    document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-exclamation-triangle"></i>not matching</span>';
    }
    }

50+ Html ,Css & Javascript Projects With Source Code

Final Output Confirm Password validation in JavaScript

Confirm Password validation in JavaScript
Confirm Password validation in JavaScript

 

Confirm Password validation in JavaScript
Confirm Password validation in JavaScript

 

Live Preview Of Confirm Password validation in JavaScript

Now that we have completed our Confirm Password validation. Here is our updated output with Html, CSS and JavaScript. Hope you like the Password Validation Using JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Password validation in JavaScript is essential since it allows the user to create a secure password and prevents password cracking.

Thank you for visiting!!

In this post, we learn how to create a Password Validation Using JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki
Code by – Kaio Almeida

Leave a Reply