ValidForm Major

<!
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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</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>
<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>
<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>
<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>
<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 = document.getElementById('fullName').value.trim();

const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const password = document.getElementById('password').value.trim();
const confirmPassword = document.getElementById('confirmPassword').value.trim();
// Validate form fields
let isValid = true;
// Validate full name
if (fullName.length < 5) {
displayError('nameError', 'Name must be at least 5 characters long.');
isValid = false;
// Validate email
if (!email.includes('@')) {
displayError('emailError', 'Please enter a valid email address.');
isValid = false;
// Validate phone number
if (phone.length !== 10 || phone === '1234567890' || isNaN(phone)) {
displayError('phoneError', 'Please enter a valid 10-digit phone number.');
isValid = false;
// Validate password
if (password.length < 8 || password.toLowerCase() === 'password' || password.toLowerCase()

=== fullName.toLowerCase()) {
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) {
document.getElementById('successMessage').classList.remove('d-none'); // Show success

message
setTimeout(function() {
document.getElementById('successMessage').classList.add('d-none'); // Hide message after

3 seconds
document.getElementById('registrationForm').reset(); // Reset form
}, 3000);
return isValid;
// Function to display error messages
function displayError(id, message) {
document.getElementById(id).textContent = message;
// Function to clear previous error messages
function clearErrors() {
document.getElementById('nameError').textContent = '';
document.getElementById('emailError').textContent = '';
document.getElementById('phoneError').textContent = '';
document.getElementById('passwordError').textContent = '';
document.getElementById('confirmPasswordError').textContent = '';
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
----
body {
background-image: url(https://wallpapercave.com/wp/wp2506817.jpg);
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;

ValidForm Major

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ValidForm Major

Uploaded by

Copyright:

Available Formats

<!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<div class="container-sm mt-5">

<form id="registrationForm" onsubmit="return validateForm()">

<label for="fullName">Full Name</label>

<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Enter

<small class="form-text text-muted">Full Name must be at least 5 characters long.</small>

<div class="error" id="nameError"></div>

<label for="email">Email ID</label>

<input type="email" class="form-control" id="email" name="email" placeholder="Enter your

<div class="error" id="emailError"></div>

<label for="phone">Phone Number</label>

<input type="text" class="form-control" id="phone" name="phone" placeholder="Enter your

<small class="form-text text-muted">Phone number must be 10 digits and not

<input type="password" class="form-control" id="password" name="password"

<small class="form-text text-muted">Password must be at least 8 characters long and not

<div class="error" id="passwordError"></div>

<label for="confirmPassword">Confirm Password</label>

<input type="password" class="form-control" id="confirmPassword"

<div class="error" id="confirmPasswordError"></div>

<button type="submit" class="btn btn-primary">Submit</button>

<div class="success-message mt-3 d-none" id="successMessage">

<div class="alert alert-success" role="alert">

Data saved successfully!

// Clear previous errors

// Get form values

const fullName = document.getElementById('fullName').value.trim();

const phone = document.getElementById('phone').value.trim();

const password = document.getElementById('password').value.trim();

const confirmPassword = document.getElementById('confirmPassword').value.trim();

// Validate form fields

let isValid = true;

// Validate full name

displayError('nameError', 'Name must be at least 5 characters long.');

displayError('emailError', 'Please enter a valid email address.');

// Validate phone number

if (phone.length !== 10 || phone === '1234567890' || isNaN(phone)) {

displayError('phoneError', 'Please enter a valid 10-digit phone number.');

if (password.length < 8 || password.toLowerCase() === 'password' || password.toLowerCase()

displayError('passwordError', 'Password must be at least 8 characters long and not "password"

// Validate confirm password

if (password !== confirmPassword) {

displayError('confirmPasswordError', 'Passwords do not match.');

// If the form is valid, submit it

document.getElementById('successMessage').classList.remove('d-none'); // Show success

document.getElementById('successMessage').classList.add('d-none'); // Hide message after

document.getElementById('registrationForm').reset(); // Reset form

// Function to display error messages

function displayError(id, message) {

// Function to clear previous error messages

border:1px solid white;

box-shadow: 0 0 10px black;

You might also like