Scribd
Upload
10 views

ValidForm Major

Uploaded by

Viraj Arya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

ValidForm Major

Uploaded by

Viraj Arya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

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>

<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 = 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;

You might also like