Write a program to accept three data like username, password, and confirm password check whether value for password and confirm password match or not. If both values are the same display all data are entered by the user else display an error message.
In this tutorial, we are going to valid form with given requirements. let's get started
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<div class="form-wrap">
<form name="register">
<label for="username">User Name</label>
<input type="text" id="username">
<label for="password">Password</label>
<input type="password" placeholder="" id="password">
<br>
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword">
<p id="result"></p>
<div class="btn-group">
<button>Submit</button>
</div>
</form>
</div>
</body>
</html>
2. CSS
<style>
body {
font-family: sans-serif;
text-align: left;
}
label {
font-weight: bold;
line-height: 2.7;
}
.form-wrap {
width: 20%;
margin: auto;
padding: 25px 30px;
border-radius: 5px;
background: #9C27B0;
color: #ffffff;
}
input {
width: 200px;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
border-color: #00f;
}
button {
border: none;
padding: 10px 15px;
font-weight: bold;
font-size: 14px;
color: #ffffff;
background: orange;
border-radius: 4px;
}
#result {
background: #514e4e99;
padding: 10px;
width: 225px;
border-radius: 5px;
}
</style>
3. JS
<script>
const result = document.getElementById("result");
const form = document.forms.register;
form.addEventListener("submit", (e) => {
e.preventDefault();
const username = form.username.value;
const password = form.password.value;
const confirmPassword = form.confirmPassword.value;
isFiledsAreEmpty() ? alert('All fields are required.') : renderValue();
function renderValue() {
isPasswordMatch() ?
result.innerHTML = "User Name :" + username + "<br>Password :" + password :
alert("Password should match.")
}
function isPasswordMatch() {
if (password == confirmPassword)
return true;
return false
}
function isFiledsAreEmpty() {
if (!username || !password || !confirmPassword)
return true;
return false;
}
})
</script>
4. Result
![[Cupons] Paid udemy courses for free](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYa-f_8UEE95d9stpdRzq6_DUq19avn09M2CVWIuQGI_PwaZBMcNhuHmPZQsw81GMeWwUY2Q-Cr66RoAmMq1f_pok6pdv-W86qc9_wWSxqXEq_RHYyRY0Ldly_yi2DSfyed4Cxiks6Nbzp/w680/Paid+udemy+courses+for+free.png)
0 Comments
If you have any question please ask?