
Design comparison
Community feedback
- @skyv26Posted 2 months ago
Hi @MolinaEf π,
Iβve reviewed the provided code and JS logic. Below are my observations and suggestions for improvements, along with actionable feedback. Let me know if you have any questions or need further clarification! π
HTML Feedback
-
Error Message Positioning:
- Current setup disturbs the page flow when error messages are displayed.
- Suggestion: Position the error messages absolutely within their respective labels. This ensures a smoother user experience without disrupting the layout.
-
Radio Button Accessibility:
- Clicking the circular dots works, but clicking the text doesnβt activate the radio buttons.
- Suggestion: Wrap the
<input>
and its<label>
directly without using<div>
. This makes the entire text area clickable, improving usability.
JavaScript Improvements
Your current JS logic can be refactored for better readability and reduced complexity. Here's a more compact and DRY version:
document.querySelector('form').addEventListener('submit', handleSubmit); function handleSubmit(e) { e.preventDefault(); const errors = validateForm(); if (Object.keys(errors).length === 0) { showToast(); } else { displayErrors(errors); } } function validateForm() { const errors = {}; const fields = { firstName: 'First Name', lastName: 'Last Name', email: 'Email Address', message: 'Message' }; // Validate text inputs and textarea Object.keys(fields).forEach((field) => { const input = document.getElementById(field); const error = document.getElementById(`${field}-error`); if (!input.value.trim()) { errors[field] = `${fields[field]} is required`; setErrorState(input, error, true); } else { setErrorState(input, error, false); } }); // Validate email format const emailInput = document.getElementById('email'); if (!errors.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value)) { errors.email = 'Invalid email address'; setErrorState(emailInput, document.getElementById('invalid-email-error'), true); } // Validate radio buttons const radioChecked = Array.from(document.querySelectorAll('input[name="radio"]')).some(r => r.checked); setErrorState( null, document.getElementById('radio-error'), !radioChecked, radioChecked ? '' : 'Please select a query type' ); // Validate checkbox const checkbox = document.getElementById('checkbox'); setErrorState( null, document.getElementById('checkbox-error'), !checkbox.checked, checkbox.checked ? '' : 'Please consent to being contacted' ); return errors; } function setErrorState(input, errorElement, isError, message = '') { if (input) input.classList.toggle('red', isError); if (errorElement) { errorElement.textContent = message; errorElement.classList.toggle('hide', !isError); } } function displayErrors(errors) { console.error('Validation Errors:', errors); } function showToast() { document.querySelector('.toast').classList.add('show'); // Add a show class for toast display }
Why These Changes?
-
Compact Logic:
- Removed repetitive code by using reusable
setErrorState()
for managing input and error states. - Grouped validation logic for better readability.
- Removed repetitive code by using reusable
-
Improved Readability:
- Object mapping (
fields
) makes it easy to add or remove fields in the future.
- Object mapping (
-
Better User Feedback:
- Directly updates the UI for each validation error, ensuring errors are clear and actionable.
CSS Suggestions
- Position Error Messages Absolutely:
- Add the following CSS for error messages to appear within the label:
label { position: relative; } .error { position: absolute; top: 100%; /* Adjust based on spacing */ left: 0; color: red; font-size: 0.9em; }
- Add the following CSS for error messages to appear within the label:
- Radio Button Usability:
- Modify the HTML and CSS to ensure the entire text is clickable:
<label> <input type="radio" name="radio" value="1"> General Enquiry </label>
label { display: flex; align-items: center; cursor: pointer; } input[type="radio"] { margin-right: 0.5em; }
- Modify the HTML and CSS to ensure the entire text is clickable:
Let me know how these suggestions work out! π
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord