In almost every modern website we have seen a login and signup feature, which is surely an important service for both the client and the service provider. When a user signs up for a certain website they have to put in a username a password, to enter the password websites ask them to enter a password two times, this is for the user’s security, whether the entered password is the same or not. In this article. We will create a confirmed password validation using HTML, CSS, and JavaScript.
Approach
-
HTML Structure:
- The HTML structure defines a simple form with fields for a username, password, and password confirmation. It also includes styling for a centered and styled UI using Flexbox.
-
Password Confirmation Validation:
-
JavaScript function
validate_password()
is triggered on every keyup event in the password confirmation field. - It compares the password and confirmation password values and provides visual feedback, disabling the submit button if the passwords don’t match.
-
JavaScript function
-
Visual Feedback:
-
Visual feedback for password match/mismatch is displayed using different colors and symbols in the
wrong_pass_alert
span.
-
Visual feedback for password match/mismatch is displayed using different colors and symbols in the
-
Submit Button Functionality:
-
The
wrong_pass_alert()
function is called when the submit button is clicked. - It checks if both the password and confirmation password fields are filled. If yes, it shows an alert with a success message; otherwise, it prompts the user to fill in all fields.
-
The
-
Styling and UI:
- CSS styles are applied to create a visually appealing UI, with a centered form, rounded input fields, and a submit button. Hover effects and box shadows enhance the user experience.
Example: Below is the implementation of the above approach.
HTML
<!DOCTYPE html> < head >
< title >Confirm Password validation using javascript</ title >
< style >
body {
margin: 0;
padding: 0;
background-color: rgb(50, 57, 78);
display: flex;
justify-content: center;
align-items: center;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(34, 34, 34);
height: 400px;
width: 300px;
margin-top: 15%;
border-radius: 10px;
box-shadow: 2px 4px 6px rgb(0, 0, 0);
}
.pass {
display: flex;
flex-direction: column;
}
.image h2 {
color: rgb(2, 149, 27);
font-size: 30px;
font-family: sans-serif;
margin-bottom: 50px;
}
.username input,
.pass input {
font-family: sans-serif;
margin-bottom: 20px;
height: 30px;
border-radius: 100px;
border: none;
text-align: center;
outline: none;
}
.submit_btn {
height: 30px;
width: 80px;
border-radius: 100px;
border: none;
outline: none;
background-color: rgb(0, 179, 95);
margin-top: 15px;
}
.submit_btn:hover {
background-color: rgba(0, 179, 95, 0.596);
color: rgb(14, 14, 14);
cursor: pointer;
}
</ style >
</ head >
< body >
< div class = "main" >
< div class = "image" >
< h2 >GeeksforGeeks</ h2 >
</ div >
< div class = "username" >
< input type = "text"
name = "username"
placeholder = "Dummyuser" >
</ div >
< div class = "pass" >
< input id = "pass"
type = "password"
name = "pass"
placeholder = "Enter Password"
required"">
< input id = "confirm_pass"
type = "password"
name = "confirm_pass"
placeholder = "Confirm Password" required
onkeyup = "validate_password()" >
</ div >
< span id = "wrong_pass_alert" ></ span >
< div class = "buttons" >
< button id = "create"
class = "submit_btn"
onclick = "wrong_pass_alert()" >
Submit
</ button >
</ div >
</ div >
< script >
function validate_password() {
let pass = document.getElementById('pass').value;
let confirm_pass = document.getElementById('confirm_pass').value;
if (pass != confirm_pass) {
document.getElementById('wrong_pass_alert').style.color = 'red';
document.getElementById('wrong_pass_alert').innerHTML
= '☒ Use same password';
document.getElementById('create').disabled = true;
document.getElementById('create').style.opacity = (0.4);
} else {
document.getElementById('wrong_pass_alert').style.color = 'green';
document.getElementById('wrong_pass_alert').innerHTML =
'🗹 Password Matched';
document.getElementById('create').disabled = false;
document.getElementById('create').style.opacity = (1);
}
}
function wrong_pass_alert() {
if (document.getElementById('pass').value != "" &&
document.getElementById('confirm_pass').value != "") {
alert("Your response is submitted");
} else {
alert("Please fill all the fields");
}
}
</ script >
</ body >
</ html >
|
Output: