Preview:
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
}
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