registration login profile payment
Wed Nov 20 2024 15:09:28 GMT+0000 (Coordinated Universal Time)
Saved by @sem
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Register</h1>
<form id="registrationForm">
<input type="text" id="username" placeholder="Username" required>
<input type="email" id="email" placeholder="Email" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Register</button>
<div id="message" class="error-message"></div>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById("registrationForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
validateRegistration();
});
function validateRegistration() {
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const messageDiv = document.getElementById("message");
messageDiv.textContent = "";
// Simple validation
if (username.length < 3) {
messageDiv.textContent = "Username must be at least 3 characters.";
return;
}
if (!/\S+@\S+\.\S+/.test(email)) {
messageDiv.textContent = "Email is not valid.";
return;
}
if (password.length < 6) {
messageDiv.textContent = "Password must be at least 6 characters.";
return;
}
messageDiv.textContent = "Registration successful!";
// You can proceed to send the data to the server here
}
User Login Page(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Login</h1>
<form id="loginForm">
<input type="email" id="loginEmail" placeholder="Email" required>
<input type="password" id="loginPassword" placeholder="Password" required>
<button type="submit">Login</button>
<div id="loginMessage" class="error-message"></div>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
validateLogin();
});
function validateLogin() {
const email = document.getElementById("loginEmail").value;
const password = document.getElementById("loginPassword").value;
const loginMessageDiv = document.getElementById("loginMessage");
loginMessageDiv.textContent = "";
// Simple validation
if (!/\S+@\S+\.\S+/.test(email)) {
loginMessageDiv.textContent = "Email is not valid.";
return;
}
if (password.length < 6) {
loginMessageDiv.textContent = "Password must be at least 6 characters.";
return;
}
loginMessageDiv.textContent = "Login successful!";
// You can proceed to authenticate the user here
}
User Profile Page(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>User Profile</h1>
<form id="profileForm">
<input type="text" id="profileUsername" placeholder="Username" required>
<input type="email" id="profileEmail" placeholder="Email" required>
<button type="submit">Update Profile</button>
<div id="profileMessage" class="error-message"></div>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById("profileForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
validateProfile();
});
function validateProfile() {
const username = document.getElementById("profileUsername").value;
const email = document.getElementById("profileEmail").value;
const profileMessageDiv = document.getElementById("profileMessage");
profileMessageDiv.textContent = "";
// Simple validation
if (username.length < 3) {
profileMessageDiv.textContent = "Username must be at least 3 characters.";
return;
}
if (!/\S+@\S+\.\S+/.test(email)) {
profileMessageDiv.textContent = "Email is not valid.";
return;
}
profileMessageDiv.textContent = "Profile updated successfully!";
// You can proceed to update the user profile on the server here
}
Payment page(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Payment</h1>
<form id="paymentForm">
<input type="text" id="cardNumber" placeholder="Card Number" required>
<input type="text" id="expiryDate" placeholder="MM/YY" required>
<input type="text" id="cvv" placeholder="CVV" required>
<button type="submit">Pay</button>
<div id="paymentMessage" class="error-message"></div>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById("paymentForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
validatePayment();
});
function validatePayment() {
const cardNumber = document.getElementById("cardNumber").value;
const expiryDate = document.getElementById("expiryDate").value;
const cvv = document.getElementById("cvv").value;
const paymentMessageDiv = document.getElementById("paymentMessage");
paymentMessageDiv.textContent = "";
// Simple validation
if (!/^\d{16}$/.test(cardNumber)) {
paymentMessageDiv.textContent = "Card number must be 16 digits.";
return;
}
if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiryDate)) {
paymentMessageDiv.textContent = "Expiry date must be in MM/YY format.";
return;
}
if (!/^\d{3}$/.test(cvv)) {
paymentMessageDiv.textContent = "CVV must be 3 digits.";
return;
}
paymentMessageDiv.textContent = "Payment successful!";
// You can proceed to process the payment here
}
Comments