<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation in HTML | </title>
<style>
/* Your CSS styles here */
/* Styles for modal */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(183, 46, 46, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Button styles */
.btn {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 8px;
}
.btn:hover {
background-color: #45a049; /* Darker Green */
}
</style>
<!-- Fontawesome CDN Link For Icons -->
<link rel="stylesheet" href="loginpage.css" />
</head>
<body>
<form id="myForm" action="drop.html" onsubmit="return validateForm()">
<h2>Form Validation</h2>
<div class="form-group fullname">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" placeholder="Enter your full name" required>
</div>
<div class="form-group email">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="form-group password">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Click here to generate a password" required>
<i id="pass-toggle-btn" class="fa-solid fa-eye"></i>
</div>
<div class="form-group date">
<label for="date">Birth Date</label>
<input type="date" id="date" placeholder="Select your date" required>
</div>
<div class="form-group gender">
<label for="gender">Gender</label>
<select id="gender" required>
<option value="" selected disabled>Select your gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group submit-btn">
<input type="submit" value="Submit" class="styled-btn">
</div>
<div class="form-group">
<button onclick="redirectToSignup()" class="btn">Login</button>
</div>
</form>
<!-- Popup window for random password -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Suggested Password:</p>
<p id="randomPassword"></p>
<button id="useRandomPassword" class="btn">Use This Password</button>
<a href="index.html" class="btn" id="createOwnPassword">Create Own Password</a>
<button id="cancelPassword" class="btn">Cancel</button>
</div>
</div>
<script>
// JavaScript code for generating a suggested password
function generateSuggestedPassword() {
var length = 10; // Change the length of the suggested password as needed
var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+<>?"; // Define the character set for the suggested password
var password = "";
for (var i = 0; i < length; i++) {
password += charset.charAt(Math.floor(Math.random() * charset.length));
}
return password;
}
// JavaScript code to display suggested password in popup window
document.getElementById('password').addEventListener('click', function() {
var suggestedPassword = generateSuggestedPassword();
document.getElementById('randomPassword').textContent = suggestedPassword;
document.getElementById('myModal').style.display = "block";
});
// Close the modal when the close button is clicked
document.getElementsByClassName('close')[0].addEventListener('click', function() {
document.getElementById('myModal').style.display = "none";
});
// Close the modal when clicked outside of the modal content
window.onclick = function(event) {
var modal = document.getElementById('myModal');
if (event.target == modal) {
modal.style.display = "none";
}
};
// Use the random password when the "Use This Password" button is clicked
document.getElementById('useRandomPassword').addEventListener('click', function() {
var suggestedPassword = document.getElementById('randomPassword').textContent;
document.getElementById('password').value = suggestedPassword;
document.getElementById('myModal').style.display = "none";
});
// Redirect to signup.html when the "Login" button is clicked
function redirectToSignup() {
window.location.href = "loginpage.html";
}
// Cancel and close the modal when the "Cancel" button is clicked
document.getElementById('cancelPassword').addEventListener('click', function() {
document.getElementById('myModal').style.display = "none";
});
// Form validation function
function validateForm() {
var form = document.getElementById('myForm');
if (!form.checkValidity()) {
// If form is invalid, prevent form submission
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
return form.checkValidity();
}
</script>
</body>
</html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter