Form Validation

Here’s a well-structured and fully functional implementation of a form with real-time input validation for **Username** and **Email** fields. --- ### ✅ Features Implemented - **Live Validation**: Errors are shown *as the user types*. - **Form Submission Guard**: Prevents submission if any input is invalid. - **Clean UX**: Shows/hides error messages dynamically. - **Validation Rules**: - **Username**: At least 4 characters (spaces count as characters). - **Email**: Must match a basic format using regex. --- ### ✅ HTML Structure ```html Form Validation ``` --- ### 📝 Explanation #### ✅ HTML - The form includes: - A `

` with two ``s for username and email. - Two dedicated `

` elements to display error messages. - Each input has a `required` attribute to assist form submission behavior when JavaScript is disabled. #### 🎨 CSS - `.error` class: - Hidden by default (`display: none`) - Colored red (`color: red`) for high visibility. #### ⚙️ JavaScript - **Validation Functions**: - `validateUsername()`: - Checks that the input length is **≥ 4**. - Shows error if not valid. - `validateEmail()`: - Uses the regex `/^[^\s@]+@[^\s@]+\.[^\s@]+$/`: - No whitespace - Must contain exactly one `@` and at least one dot (`.`) after it - **Input Event Binding**: - Both inputs attach to the `'input'` event to provide real-time feedback. - **Form Submission Guard**: - The `'submit'` event checks input validity again before allowing the form to proceed. --- ### 🧪 Edge Cases Handled | Input Type | Behavior | Example (pass/fail) | |---------------------|----------|----------------------------------| | Short username | Invalid | `"app"` (fail), `"apps"` (pass) | | Whitespace username | Valid | `" app"` (length 4+ → valid) | | Email with space | Invalid | `"test @example.com"` (fail) | | Invalid email format| Invalid | `"test@testcom"` => needs dot | | Valid email format | Valid | `"user@example.com"` (pass) | --- ### ✅ Browser Compatibility - The code uses only standard DOM API and regex features supported in all modern browsers. - Uses `DOMContentLoaded` to wait for the DOM to be fully loaded before initializing. --- This implementation follows best practices and ensures a smooth, user-friendly, and accessible input validation experience.

Real-Time Username & Email Validation Form

openrouter/qwen3-235b-a22b

Traces

No span selected