[Draft] Feature: Add client-side form validation (Issue #3)#473
Draft
MTDev2024 wants to merge 47 commits intoOpenClassrooms-Student-Center:masterfrom
Draft
[Draft] Feature: Add client-side form validation (Issue #3)#473MTDev2024 wants to merge 47 commits intoOpenClassrooms-Student-Center:masterfrom
MTDev2024 wants to merge 47 commits intoOpenClassrooms-Student-Center:masterfrom
Conversation
…rnament location radios
- Added <legend> elements with .sr-only class for radio and checkbox groups to enhance screen reader support - Corrected <fieldset> usage with a single <legend> per fieldset - Removed invalid attributes (ex : width=auto on <img>) - Unified text styling between <label> and <legend> for visual consistency - Enhanced modal semantics with aria-labelledby and logical structure
…hdate, and quantity inputs. Display console messages for each validation case.
…ling with reusable function
…heckbox, form-label-radio) Replaced generic class names like checkbox-label and checkbox2-label with more descriptive alternatives specific to input types.
… and quantity fields
… fields and track optional consent
- Replaced <span> with <button> for better semantic and keyboard accessibility - Added aria-label=Close modal for screen readers - Reset button default styles using �ll: unset to preserve custom styles - Maintained original close icon design with CSS pseudo-elements
…ton issues - Split modal functionality into two separate JS files for clarity - Ensure each modal has its own open/close functions - Fix 'Close' button at the bottom of confirmation modal - Add keyboard support (Escape key) for both modals - Use DOMContentLoaded to attach event listeners safely
…amic class switching - Implemented and styles for user feedback - Updated submit handler to toggle classes based on validation result - Ensured message container updates text and style dynamically - Preserved existing form data logging functionality
…idation and modal scripts - Added comments to real-time input validation event listeners - Documented form submission flow with detailed notes on data retrieval, validation, and success - Improved readability of modal open/close logic with step-by-step comments - Ensured comments remain concise, relevant, and pedagogical to satisfy project requirements
- Adjusted hero-section height and margins in media queries - Ensured body and main elements don't overflow viewport - Fixed content being cut off at the bottom on mobile devices
- Hide opaque background (.bground) on small screens - Ensure .content fills all available space below nav (80px) - Add margin-top and height calc() for proper positioning
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This draft PR introduces the first implementation of client-side form validation to address Issue #3.
✅ Work included so far
firstname,lastname,email,birthdate,quantity<fieldset>and<legend>for radio/checkbox groups.form-label-checkbox,.form-label-radio,.checkbox-input, etc.🛠️ Work still in progress
ℹ️ This PR is marked as a draft and is not yet ready for merge.