💡[Feature]: Feature Request: Implement Advanced Custom Form Validations

[divysaxena24]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

Currently, the contact form relies on default Bootstrap/browser validations (e.g., HTML5 required attribute showing "Please fill out this field").
This provides a poor user experience and inconsistent error handling across browsers.

We need to implement advanced custom validations with better control, customization, and user-friendly error messages.

---

Use Case

Proposed Improvements:

1. Custom Validation Rules

   • First Name & Last Name: Minimum 2 characters, alphabets only.
   • Email: Valid email format check (regex-based).
   • Subject: Mandatory selection from the dropdown.
   • Message: Minimum 10 characters required.

2. Inline Error Messages

   • Display error messages directly under the respective input fields.
   • Example:
     • ❌ "First name must be at least 2 characters long."
     • ❌ "Please enter a valid email address."

3. Real-time Validation

   • Validate fields on blur and while typing instead of only on submit.
   • Highlight invalid fields with a red border and error message.

4. Accessibility

   • Ensure ARIA roles and attributes for screen readers.
   • Clear error summaries for users relying on assistive technologies.

5. Validation Library (Optional)

   • Consider using lightweight validation libraries like Yup, Validator.js, or implement a custom vanilla JS solution.

---

Benefits

• Improved user experience with clear and contextual error messages.
• Cross-browser consistency (no reliance on default browser popups).
• Easier to extend validation rules in the future.

---

Add ScreenShots

Priority

High

Record

• I have read the Contributing Guidelines
• Are you a GSSOC'25 contributor
• I want to work on this issue

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[github-actions]

👤 Issue assigned to @divysaxena24.

[github-actions]

✅ This issue has been closed. Thank you for your contribution!