🛠️ FIX : Last Name Field validation in Contact us page #2334
Conversation
|
@akash70629 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes in the Changes
Assessment against linked issues
Possibly related issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
src/User/pages/Contacts/Contact.jsx (5)
107-113: LGTM! Last Name field validation improved.The changes effectively address the PR objective by restricting the Last Name field to alphabetic characters and spaces. The custom validity message provides clear feedback to users.
Consider adding a
maxLengthattribute to prevent excessively long inputs:<input type="text" id="lname" className="w-full p-2 border rounded" placeholder="Enter your last name" minLength={3} required pattern="[a-zA-Z ]+" + maxLength={50} onInvalid={(e) => { e.target.setCustomValidity('Numbers and Symbols are not allowed.'); }} onInput={(e) => { e.target.setCustomValidity(''); }}/>
Line range hint
132-146: Phone number validation enhanced with country code support.The addition of a country code selector and improved phone number validation addresses the need for better input handling. The
handlePhoneInputfunction effectively limits input length.Consider updating the placeholder to reflect the new input format:
<input type="tel" id="phone" name="phone" className=" p-2 border rounded" - placeholder="+91888888888" + placeholder="Enter phone number" pattern="\d{10}" minlength={4} maxLength={15} required onInput={handlePhoneInput} title="Phone number must be between 4 and 15 digits" />
Line range hint
147-148: Comprehensive country selection added.The addition of a country select element with an extensive list of countries improves data collection and user experience.
Consider adding a default "Select a country" option to encourage user interaction:
<select id="country" className="w-full p-2 border rounded" required> + <option value="">Select a country</option> <option value="IN">India</option> <option value="AF">Afghanistan</option> // ... (other country options) </select>
Line range hint
16-24: Improved form submission handling with additional validation.The
handleSubmitfunction now includes validation for phone number length and uses SweetAlert for error messages, enhancing both data quality and user experience.Consider updating the error message to be more specific:
if (phoneNumber.length < 4 || phoneNumber.length > 15) { Swal.fire({ title: 'Error!', - text: 'Phone number must be 10 digits.', + text: 'Phone number must be between 4 and 15 digits.', icon: 'error', confirmButtonText: 'OK', }); return; }
Line range hint
1-326: Overall improvements to form validation and user experience.The changes in this PR effectively address the objectives by enhancing the Last Name field validation and improving overall form handling. The additions of country code selection for phone numbers and a comprehensive country list further enhance data quality and user experience.
Consider implementing client-side form validation using a library like Yup or Joi for more robust and maintainable validation logic. This would allow for easier management of validation rules and provide a consistent validation approach across the application.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/User/pages/Contacts/Contact.jsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (1)
src/User/pages/Contacts/Contact.jsx (1)
Line range hint
321-321: Message textarea now requires a minimum length.Setting a minimum length of 10 characters for the message ensures that users provide meaningful content. This is a good improvement to the form's data quality.
codervivek5
added
good first issue
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to the project 🚀 Keep Contributing!! ✨ |
Changes proposed
The "Last Name" field on the Contact Us page only accepts alphabetical letters (a-z, A-Z). Currently, the field does not allow users to input symbols and special characters, which may lead to invalid or spam submissions.
Fixes Issue
Closes #2332
Screenshots
Before
After
Checklist
Summary by CodeRabbit
New Features
Bug Fixes