RDX Spam project - Posts

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Form</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="login-container"> <h2>Login</h2> <form id="loginForm" onsbmit="validate_form()"> <div class="form-group"> <label for="userId">Numerical ID:</label> <input type="number" id="userId" name="userId" required> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" id="password" name="password" required> </div>  <button type="submit">Login</button> </form> <p id="error-message" class="error-message"></p> </div> <script> function validate_form() { // Get input values const userId = document.getElementById('userId').value; const password = document.getElementById('password').value; const errorMessage = document.getElementById('error-message');

        // Clear previous error message
        errorMessage.textContent = '';

        // Validate Numerical ID (minimum 6 characters and numeric)
        if (!/^\d{6,}$/.test(userId)) {
            errorMessage.textContent = 'Numerical ID must be at least 6 digits long and numeric.';
            return false; // Prevent form submission
        }

        // Validate Password (non-empty)
        if (password.trim() === '') {
            errorMessage.textContent = 'Password cannot be empty.';
            return false; // Prevent form submission
        }

        // If all validations pass
        alert('Login successful!');
        return true; // Allow form submission
        }

        // Attach the validate function to the form submission
        document.getElementById('loginForm').addEventListener('submit', function(event) {
        if (!validate_form()) {
            event.preventDefault(); // Prevent form from submitting if validation fails
        }
    });

</script>

</body> </html>

style sheet ----------

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.login-container {
background-color: #fff;
padding: 30px; /box size/
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
}

h2 {
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
text-align: left;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #45a049;
}

.error-message {
color: red;
margin-top: 15px;
}