Form Validation Needs Improvement

[SaranDharshanSP]

Description

Form validation is incomplete or not functioning as expected for the following features:

1. "Send Us a Message" Form: The validation for required fields, email format, and message content is insufficient or missing.
2. Quiz on the Main Page: The quiz lacks proper validation to ensure all required questions are answered before submission and to prevent invalid input formats.

Steps to Reproduce

For "Send Us a Message" Form:

1. Navigate to the "Send Us a Message" section.
2. Attempt to submit the form without filling out required fields (e.g., name, email, or message).
3. Enter invalid email formats or incomplete messages.
4. Observe that the form either submits or does not provide meaningful error messages.

For the Quiz on the Main Page:

1. Navigate to the main page and start the quiz.
2. Skip some questions or provide invalid input (e.g., entering text in a numerical field).
3. Attempt to submit the quiz.
4. Observe that there are no alerts or error messages for incomplete or invalid inputs.

Expected Behavior

• For the "Send Us a Message" Form:

  • All required fields (name, email, and message) should be validated before submission.
  • The email field should validate for proper email format (e.g., name@example.com).
  • A proper error message should be displayed for invalid or missing inputs.

• For the Quiz on the Main Page:

  • Ensure all required questions are answered before submission.
  • Validate field formats (e.g., text for text inputs, numbers for numerical fields).
  • Show clear error messages or highlights for any invalid or incomplete fields.

Current Behavior

• "Send Us a Message" Form:

  • Missing or inadequate validation for required fields.
  • Form can sometimes be submitted with invalid or missing inputs.

• Quiz on the Main Page:

  • Users can skip questions without receiving warnings.
  • No validation for input formats, leading to potential errors in the quiz results.

Affected Modules/Components

• "Send Us a Message" form
• Quiz feature on the main page

Severity

Medium
This issue affects usability and user experience but does not break critical functionality.

Status

Pending
Form validation logic needs to be implemented or improved.

Suggested Fix

1. General Validation:

   • Use client-side validation with JavaScript or React (if applicable).
   • Implement server-side validation as a fallback for security purposes.

2. "Send Us a Message" Form:

   • Make fields like name, email, and message mandatory.
   • Use regular expressions to validate the email format.
   • Display error messages inline, next to the respective fields.

3. Quiz on the Main Page:

   • Ensure all questions have a required attribute (or similar) to enforce completion.
   • Validate input types (e.g., numeric fields, dropdowns).
   • Display warnings or error messages for skipped or invalid fields.

4. Testing:

   • Test the form and quiz on multiple browsers and devices.
   • Use mock data to verify validation behaviors.

[karthik-saiharsh]

Interested to work on this @SaranDharshanSP

[SaranHiruthikM]

I'd love to work on this issue if assigned to me. @SaranDharshanSP

[mukesh1352]

I'd love to work under this issue @SaranDharshanSP

[priyansh-narang2308]

I WOULD LIKE TO WORK ON THIS ISSUE @SaranDharshanSP

[sathvik-1408]

I would like to work on this issue @SaranDharshanSP

[SaranDharshanSP]

hirux06

Hey! Noticed that you've already been assigned issues under two other repositories. Please complete those and raise PRs before requesting this issue. Excited to see your contributions!

[SaranDharshanSP]

I'd love to work under this issue @SaranDharshanSP

Hey @mukesh1352 , you've been assigned this issue under Amrita Winter of Code! Please ensure to raise a PR by 28/12/2024, or it will be reassigned to someone else. Best of luck! 🫡

[Hsk12699]

I am interested to work on this issue @SaranDharshanSP

[Git-Roshan09]

I would like to work on this issue @SaranDharshanSP