Skip to content

Enhance signup form with validation and animations #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alwin-m wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance signup form with validation and animations #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 79 additions & 13 deletions signup_page/signup_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
--card-bg: #1b1b1b;
--text-dark: #fff;
--text-light: #ccc;
--error: #ff4d4d;
--success: #4dff91;
}

body {
Expand Down Expand Up @@ -61,7 +63,9 @@
outline: 2px solid var(--primary);
}

#username-status {
#username-status,
#password-status,
#confirm-status {
font-size: 13px;
height: 16px;
margin-top: -6px;
Expand Down Expand Up @@ -97,15 +101,34 @@
.login-link a:hover {
text-decoration: underline;
}

/* Additional animations */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px);}
to { opacity:1; transform: translateY(0);}
}
@keyframes scaleIn {
from { transform: scale(0.9); opacity:0; }
to { transform: scale(1); opacity:1; }
}
.container {
animation: fadeInUp 0.8s ease-out;
}
input, button {
animation: scaleIn 0.4s ease-out;
}
button:hover {
transform: translateY(-3px) scale(1.03);
transition: 0.2s;
}
</style>
</head>

<body>
<div class="container">
<h2>Create Account</h2>

<!-- CONNECTED BACKEND FORM -->
<form action="signup_action.php" method="POST">
<form action="signup_action.php" method="POST" onsubmit="return validateForm()">

<label>Username</label>
<input type="text" id="username" name="username" placeholder="Choose a username" required />
Expand All @@ -116,40 +139,83 @@ <h2>Create Account</h2>

<label>Password</label>
<input type="password" id="password" name="password" placeholder="Create a password" required />
<div id="password-status"></div>

<label>Confirm Password</label>
<input type="password" id="confirm" placeholder="Re‑enter your password" required />
<div id="confirm-status"></div>

<label>Date of Birth</label>
<input type="date" id="dob" name="dob" required />

<button type="submit">Sign Up</button>
</form>

<div class="login-link">Already have an account? <a href="#">Login here</a>.</div>
<div class="login-link">Already have an account? <a href="login.php">Login here</a>.</div>
</div>

<script>
document.getElementById('username').addEventListener('input', function() {
// Live username validation
const usernameInput = document.getElementById('username');
const usernameStatus = document.getElementById('username-status');

usernameInput.addEventListener('input', function() {
const username = this.value.trim();
const statusBox = document.getElementById('username-status');

if (username.length < 3) {
statusBox.style.color = 'orange';
statusBox.textContent = 'Username too short';
usernameStatus.style.color = 'orange';
usernameStatus.textContent = 'Username too short';
return;
}

// LIVE CHECK (Must match your backend file)
fetch('check_username.php?username=' + username)
.then(res => res.text())
.then(data => {
if (data === 'taken') {
statusBox.style.color = 'red';
statusBox.textContent = 'Username already taken';
usernameStatus.style.color = 'var(--error)';
usernameStatus.textContent = 'Username already taken';
} else {
statusBox.style.color = 'lightgreen';
statusBox.textContent = 'Username available';
usernameStatus.style.color = 'var(--success)';
usernameStatus.textContent = 'Username available';
}
});
});

// Password strength
const pass = document.getElementById('password');
const passStatus = document.getElementById('password-status');
pass.addEventListener('input', () => {
const val = pass.value;
if (val.length < 6) {
passStatus.style.color = 'var(--error)';
passStatus.textContent = 'Password too weak';
} else {
passStatus.style.color = 'var(--success)';
passStatus.textContent = 'Strong password';
}
});

// Confirm password check
const confirm = document.getElementById('confirm');
const confirmStatus = document.getElementById('confirm-status');
confirm.addEventListener('input', () => {
if (confirm.value !== pass.value) {
confirmStatus.style.color = 'var(--error)';
confirmStatus.textContent = 'Passwords do not match';
} else {
confirmStatus.style.color = 'var(--success)';
confirmStatus.textContent = 'Passwords match';
}
});

Comment on lines +198 to +210
Copy link
Owner Author

@alwin-m alwin-m Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirm Password Check

Summary

This JavaScript snippet handles real-time validation of the Confirm Password field by checking whether the value matches the primary password input. It updates UI feedback instantly using color-coded messages.

Strengths

  • Real-time validation: The use of an input event listener ensures instant feedback.
  • Good UX cues: Color changes via CSS variables (var(--error) / var(--success)) provide quick user understanding.
  • Simple and understandable: The logic is concise and readable.

Issues / Risks

  • Variable name shadowing: Using const confirm overrides the global confirm() browser API. This is not a breaking issue but is considered bad practice.
  • No debounce: The validation runs on every keystroke; harmless here, but debouncing could be considered for heavier logic.
  • Missing null checks: If elements are not found in the DOM, this will throw errors.

Recommendations

  1. Rename variable confirm to avoid shadowing: Example: confirmInput.
  2. Add safety checks before applying listeners.
  3. Optional: Use a small helper function for clarity.

Revised Example

// Confirm password check
const confirmInput = document.getElementById('confirm');
const confirmStatus = document.getElementById('confirm-status');

if (confirmInput && pass) {
  confirmInput.addEventListener('input', () => {
      const match = confirmInput.value === pass.value;
      confirmStatus.style.color = match ? 'var(--success)' : 'var(--error)';
      confirmStatus.textContent = match ? 'Passwords match' : 'Passwords do not match';
  });
}

If you want, I can apply this improved version directly into your signup page document.

// Final form validation
function validateForm() {
if (pass.value !== confirm.value) {
alert('Passwords do not match!');
return false;
}
return true;
}
</script>

</body>
Expand Down