<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link href="[Link]
rel="stylesheet">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container-sm mt-5">
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<div class="form-group">
<label for="fullName">Full Name</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Enter
your full name" required onchange="validateForm()">
<small class="form-text text-muted">Full Name must be at least 5 characters long.</small>
<div class="error" id="nameError"></div>
</div>
<div class="form-group">
<label for="email">Email ID</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your
email" required onchange="validateForm()">
<div class="error" id="emailError"></div>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Enter your
phone number" required onchange="validateForm()">
<small class="form-text text-muted">Phone number must be 10 digits and not
"1234567890".</small>
<div class="error" id="phoneError"></div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password"
placeholder="Enter your password" required onchange="validateForm()">
<small class="form-text text-muted">Password must be at least 8 characters long and not
"password" or your name.</small>
<div class="error" id="passwordError"></div>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword"
name="confirmPassword" placeholder="Confirm your password" required
onchange="validateForm()">
<div class="error" id="confirmPasswordError"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="success-message mt-3 d-none" id="successMessage">
<div class="alert alert-success" role="alert">
Data saved successfully!
</div>
</div>
</div>
<script>
function validateForm() {
// Clear previous errors
clearErrors();
// Get form values
const fullName = [Link]('fullName').[Link]();
const email = [Link]('email').[Link]();
const phone = [Link]('phone').[Link]();
const password = [Link]('password').[Link]();
const confirmPassword = [Link]('confirmPassword').[Link]();
// Validate form fields
let isValid = true;
// Validate full name
if ([Link] < 5) {
displayError('nameError', 'Name must be at least 5 characters long.');
isValid = false;
// Validate email
if () {
displayError('emailError', 'Please enter a valid email address.');
isValid = false;
// Validate phone number
if ([Link] !== 10 || phone === '1234567890' || isNaN(phone)) {
displayError('phoneError', 'Please enter a valid 10-digit phone number.');
isValid = false;
// Validate password
if ([Link] < 8 || [Link]() === 'password' || [Link]()
=== [Link]()) {
displayError('passwordError', 'Password must be at least 8 characters long and not "password"
or your name.');
isValid = false;
}
// Validate confirm password
if (password !== confirmPassword) {
displayError('confirmPasswordError', 'Passwords do not match.');
isValid = false;
// If the form is valid, submit it
if (isValid) {
[Link]('successMessage').[Link]('d-none'); // Show success
message
setTimeout(function() {
[Link]('successMessage').[Link]('d-none'); // Hide message after
3 seconds
[Link]('registrationForm').reset(); // Reset form
}, 3000);
return isValid;
// Function to display error messages
function displayError(id, message) {
[Link](id).textContent = message;
// Function to clear previous error messages
function clearErrors() {
[Link]('nameError').textContent = '';
[Link]('emailError').textContent = '';
[Link]('phoneError').textContent = '';
[Link]('passwordError').textContent = '';
[Link]('confirmPasswordError').textContent = '';
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
----
body {
background-image: url([Link]
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100vh;
.box{
background-color: transparent;
backdrop-filter: blur(3px);
border:1px solid white;
box-shadow: 0 0 10px black;
padding:10px;
margin:auto;
width:600px;
height:700px;
transform:translate(5%,25%);
.container {
background-color: #495057;
padding: 30px;
border-radius: 10px;
margin-top: 50px;
.button{
text-align:center;
.form-control {
background-color: #6c757d;
color: #ffffff;
.form-control::placeholder {
color: #adb5bd;
.error {
color: red;
.success-message {
text-align: center;
}
.alert-success {
background-color: #28a745;