Mahathi taking over for Akshith - Job Analytics Page- Add Validation for User Input Fields

[akshith312]

Description

Related PRS (if any):

This frontend PR is not related to any other PR.
…

Main changes explained:

• Added Validation for Name, Email, Location, Timezone, Phone Number field
• Split Location/Timezone into two separate fields
• Added dropdown to select timezone
  …

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard→ https://localhost:5173/job-application
6. Try Submitting the application without filling any fields
7. Check if error message is displayed
8. Try with various combinations to check if the validations meet the conditions.

Screenshots or videos of changes:

Screen.Recording.2026-04-07.112540.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	7b4662f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a755245005c9f000831b635
😎 Deploy Preview	https://deploy-preview-5115--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[rajanidi1999]

Hi,
I have tested your PR locally everything is working as expected.

[saurabhdipte]

Hi Akshith,
I testesd this PR locally and the implemented changes are working as expected, but I found some issues.

1. There was no text box for EmailID
2. Q12 and Q13 also did not have any text box.

[rapolusidhartha]

Working as expected

[rapolusidhartha]

As expected

[kunchalasireesha]

Screen.Recording.2026-05-01.at.11.00.08.PM.mov

Working exactly as expected.
One suggestion: please add an asterisk () inside the placeholders of required fields and a " = mandatory" note at the bottom. This helps users identify required fields before hitting submit.

[Radia731]

Hello!

Checked out the Akshith-fix-validation-job-app branch, ran npm install and npm run start:local. Cleared the site cache, logged in as an Admin, and navigated to the /job-application page to test the new form validations.

What works: Tried submitting the application without filling out any fields, and the new error messages displayed correctly. ✅
Tested various combinations, and the validations trigger exactly as expected. ✅

Changes Requested:

While reviewing the form layout, I noticed that Questions 12, 13 and one Email are missing their respective input box entirely (see attached screenshot). ❌
Users currently cannot attach their Resume/CV after selecting a file. ❌

Once those input fields are added back in, this will be good to go! Please tag me when it's ready for a second round of review.

Thank you!

[DeepighaJ]

Hi
Name, Email, Location, Timezone, Phone Number field are mandatory ones and displays error when not filled.
Fields working as expected.

[kunchalasireesha]

Hi Akshith, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

[Jaden300]

Tested locally on branch Akshith-fix-validation-job-app.

• Required field validation works as expected (Name, Email, Location, Timezone, Phone Number)
• Empty form submission is correctly rejected
• Invalid email formats are correctly rejected
• Invalid phone numbers are correctly rejected
• Partial form validation behaves correctly when required fields are missing
• Light and dark mode both render without UI issues

Observations:

• City input accepts non-existent values (no validation against invalid entries)
• Some form questions (e.g., "How did you hear about OneCommunity") allow empty submissions, which may be inconsistent with other required fields

Overall functionality aligns with expected behavior for core validation logic.

Approved.

[kunchalasireesha]

Hi Akshith, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

[amaresh2001]

Functional Testing:

Tested locally on branch Akshith-fix-validation-job-app. Navigated to localhost:5173/job-application and tested all validation fields.

Phone Number Validation

• Validates the correct phone number format
• Blocks submission on invalid format
• Shows a clear error message

Location Validation

• Validates the location field correctly
• Shows a clear error message on invalid input

Email Validation

• Validates email format correctly
• Rejects missing @, missing domain etc.
• Shows a clear error message

Timezone

• Dropdown works correctly with timezone options
• Blocks submission if the timezone is not selected

Form Submission

• Form submits successfully when all fields are filled correctly
• Blocked from submitting until all validations pass

Dark Mode

• All validation error messages display correctly in dark mode

Issues:

Name field validation is insufficient

The name field only checks if it is empty, but does not validate the actual content. It currently accepts:

• Numbers (e.g. 12345) as a valid name
• Special characters (e.g. @#$%) as a valid name
• Single characters (e.g. A) as a valid name
• Emojis (e.g. 🎉) as a valid name
• Name field has no maximum length validation. The name field accepts and successfully submits 500+ characters with no restriction.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Mahitha-pasupuleti]

Tested this PR locally and verified the newly added validations for the Name, Email, Location, Timezone, and Phone Number fields.

The validation logic is working as intended. The form correctly prevents submission when required fields are missing, and appropriate validation messages are displayed. Phone number, timezone, location, and other field validations are functioning as expected, and users cannot submit the form until all mandatory requirements are satisfied.

I do have a few UX suggestions. Currently, it is not immediately clear which fields are mandatory, so adding a visible indicator (such as a * symbol) next to required fields would improve usability. Additionally, the validation popups can become difficult to read when multiple errors are displayed, making it somewhat unclear which specific fields require attention. Fields 19 and 20 are also somewhat ambiguous, as there does not appear to be an upload option or clear guidance associated with them.

These suggestions are outside the scope of this PR and do not affect the functionality being introduced here. The requirements outlined in the PR have been implemented correctly, and I have no blocking concerns. Approving this PR.

[Abhi-R0211]

Hi Akshith, I tested this PR and here is my analysis:

---

What's Working Well

• Submitting the form with all fields empty correctly displays validation error messages for all required fields
• Invalid email formats are correctly rejected with a clear error message
• Invalid phone number formats are correctly rejected with a clear error message
• Valid phone numbers are accepted correctly
• Location field validation works as expected
• Timezone dropdown works correctly and blocks submission if no timezone is selected
• Partial form validation fires correctly for only the missing required fields
• Form submits successfully when all required fields are filled correctly
• Dark mode renders without UI issues and validation error messages are readable
• Resume upload works correctly - file attaches and a confirmation toast is displayed
• Questions 12 and 13 have correct input fields - the previously reported missing input boxes issue appears resolved

---

Issues That Need To Be Addressed

1. Name Field Validation Is Insufficient

The Name field only checks if it is empty. It does not validate the actual content of the input. The following were all accepted without any error and allowed form submission to proceed past the name check:

• Numbers — e.g. 123 is accepted as a valid name
• Special characters — e.g. @#$% is accepted as a valid name
• Single character — e.g. A is accepted as a valid name
• Emojis — e.g. 🤩 is accepted as a valid name
• No maximum length — 500+ character strings are accepted with no restriction

Please add proper name validation: allow only letters, spaces, hyphens, and apostrophes; enforce a minimum length of at least 2 characters; and add a reasonable maximum length limit.

[handikaharianto]

Hi @akshith312 , after reviewing your PR, here are my findings:

Good

Showing a successful toast when form submission is successful

Bad

Phone Number input field accepts anything

This is a bad practice although you have implemented a phone number validation when submitting the form. I would suggest using something like react-phone-number-input. I'm pretty sure there are some other libraries that can be used to achieve this as well. You can do some research for other alternatives.

Timezone picker

As a user, I would feel overwhelmed if I need to select a timezone from this dropdown. I would suggest using a package like react-timezone-select where it presented the timezone in GMT format.

Displaying error messages for form inputs

Instead of displaying all error messages using a toast, it would be better to display the error message below the input fields (refer to the 2nd image).

This could be a better way of displaying the error message.

Dates before today are displayed

The dates before today in the date picker should be disabled

Doesn't explicitly show which input fields are required.

For the input fields above the resume upload button, you use the asterisk symbol to indicate that the input fields are required. However, for all the input fields below the resume upload button, it doesn't have anything to indicate that these input fields are required.

[YSWFelicity]

Tested locally ✅

Followed the testing steps from the PR description:

Checked out Akshith-fix-validation-job-app
Ran npm install + npm run start:local
Cleared site data/cache, logged in as an admin user
Navigated to /job-application
Results — validation works as described:
Submitting with all fields empty correctly displays the required-field error messages.
Tried several combinations (invalid email, invalid/empty phone, empty location, no timezone selected, etc.) and the validations triggered as expected.
The Location / Timezone split and the timezone dropdown work fine.
As far as the scope of this PR goes (input-field validation + splitting Location/Timezone), everything meets the requirements. 👍

I didn't evaluate the rest of the form (e.g. the questionnaire items, file-upload handling, etc.) since those are driven by the backend form data and fall outside the scope of this PR.

[Dnagabahiru]

Tested this PR locally and verified the validation behavior on the Job Application form.
I submitted the application without filling any fields and confirmed that validation errors were displayed for all required fields. I also tested multiple combinations of missing inputs, including Name, Email, Phone Number, Location, and Timezone, and the form correctly prevented submission until the required information was provided.
The validation messages are functioning as expected and help ensure that incomplete applications cannot be submitted. The consolidated error summary also correctly lists the missing required fields.
One minor UX observation is that when many validation errors are triggered at once, the notification panel becomes quite long and can be difficult to scan. Adding visual indicators (such as * symbols) on required fields or highlighting the corresponding fields directly could further improve usability. However, these are enhancement suggestions and do not affect the functionality introduced in this PR.
Based on my testing, the validation requirements outlined

[AmaanSyed09]

Testing Performed

1. Verified the job application page loads at /job-application.

2. Verified the updated top-section fields are present:

   • First Name
   • Last Name
   • Email
   • Location
   • Time Zone
   • Phone Number

3. Verified submitting with empty required fields shows validation errors.

4. Verified invalid email formats are rejected.

5. Verified valid email formats are accepted.

6. Verified invalid phone numbers are rejected.

7. Verified valid formatted phone numbers are accepted.

8. Verified invalid location values are rejected.

9. Verified valid location values are accepted.

10. Verified Time Zone is now a dropdown and requires a valid selection.

11. Verified the form prevents submission until validation requirements are satisfied.

12. Reviewed the changed files and confirmed the changes are limited to the job application form validation and related styling.

Result: Approve

The requested validation functionality worked as expected during local testing.

[sundarmachani]

I noticed that the phone number validation appears to enforce a specific format (e.g., +1 999-999-9999). Since the application may be used by users from different regions, it may be worth confirming whether a country-specific format is intended. If not, a more flexible validation approach that supports international phone numbers might be more appropriate.

For the Time Zone field, the value is selected from a predefined dropdown, so invalid user input is already limited through the UI.

Regarding the Location field, the current validation seems reasonable; however, it would be helpful to confirm the expected format and whether numeric characters are intentionally disallowed.

Additionally, to improve usability, mandatory fields could be clearly indicated with an asterisk (*) and corresponding required-field validation messages so users can easily identify which fields must be completed before submitting the form.

[mahathiganimi]

Hi Akshith, I have tested this branch locally, and here are my suggestions for improvement - The Name field accepts numbers and special characters and has no limit to the character. The Time zone selection scroll up looks very overwhelming to choose from. Question 19,20 where files are need to be uploaded, The format does not make uploads possible, instead asks for a response.

[shree-vaths]

Hello, I have tested #5115 on my local and its working as expected.

Passing test cases
-The name, email, phone no, location and time zone are mandatory fields.
-Email field throws an exception for wrong format
-The phone no format exception is shown for wrong format.
-Users are not allowed to submit the form until they fill out correctly.

[BosuBose132]

Tested PR #5115 locally.

I tested the Job Analytics application form validation for phone number, location, time zone, and required fields. I verified that invalid values show validation messages, the form blocks submission when required validation fails, and valid inputs allow the form to proceed. I also checked the browser console and did not see related errors.

Note: I tested the current PR branch locally, but GitHub still shows merge conflicts, so the branch will need to be updated with development before final merge.

[HemanthNidamanuru]

Hi Akshith,

I tested this PR locally.

After clearing site data/cache and logging in as an admin user, I opened the Job Application page and tested submitting the form without filling any fields.

The validation/error messages are showing correctly, and I also tested different field combinations. The validations are working as expected.

Everything looks good from my side.

[akv-iu]

Verified

• Validations for Phone number, Time, Location and Number works as intended.
• Clear Error messages for all above.
• Form submission is restricted if fields are not validated.
  All the requirements in the scope of this PR is covered.

[AnshShah-18]

I tested PR #5115 locally on the Job Application page as an Administrator.

Working as expected

• The Job Application page loads correctly.
• Submitting the form with empty fields is blocked.
• Required-field errors appear for First Name, Last Name, Email, Location, Time Zone, and Phone Number.
• Invalid email formats are rejected.
• Invalid phone numbers display a clear validation error.
• Invalid location values are rejected.
• The Time Zone dropdown is required and works correctly.
• Validation messages are readable in dark mode.

Issue found

• The First Name and Last Name fields only check whether they are empty.
• Numeric names such as 123 are accepted.
• Special-character names such as @#$% are accepted.

Since this PR specifically adds name validation, the fields should reject invalid characters and allow only appropriate name formats.

Testing screenshots are attached for reference.

Because the name validation is incomplete and is part of this PR’s scope, I am requesting changes.

Issue is in the below image:

[CarolineYXW]

Hello, I tested this PR according to the PR description.

• Verified the new validation behavior for Name, Email, Phone Number, Location, and Timezone.
• Confirmed that Location and Timezone are now separate fields and Timezone is displayed as a dropdown.
• Tested both valid and invalid inputs, and the validation behaved as expected.
• Checked the UI in both Light and Dark Mode, and no issues were observed.

Everything worked as expected. Nice work!

https://github.com/user-attachments/assets/07c94439-2940-40f9-adfe-671457fc9979
https://github.com/user-attachments/assets/e5433413-8e45-4ef8-8a87-6ae85ffa9154

[sitaram1921]

Tested this locally. All other validations work correctly (email, phone, location, timezone), but the First Name and Last Name fields only check if they're non-empty. Numbers and special characters like 123 or @#$% are accepted as valid names.
Since this PR is specifically about adding name validation, these fields need character validation too.
Screenshots attached.

Issue is in this screenshot.

[kzou55]

Hi Akshith,

I ran and tested the PR locally

Verified

• Email needs @ and must be valid

  

• Phone needs to be valid

  

• Location has to be in correct format

  

• Can be left blank:

  • Company & Position
  • Primary Website/Social

Issues

1. First Name and Last Name validation only checks if its non empty. Should check that it contains only letters.

2. Duplicated questions(name, email, location/timezone, number, website

   

Note

• For the numbered questions, all they check is if the input is not empty. Could you clarify if that is intended/the correct behavior.

[iAbhi001]

Hi Akshith,

I pulled and tested this PR locally on branch Akshith-fix-validation-job-app. Here is my testing summary:

✅ What's Working:

• Email Validation: Correctly requires @ and rejects malformed email formats.
• Phone Number Validation: Successfully blocks invalid phone number formats.
• Location Validation: Requires a valid location format as expected.
• Optional Fields: Confirmed that Company & Position and Primary Website/Social can be left blank without blocking submission.

---

❌ Issues / Requested Changes:

1. Name Field Validation Is Insufficient:
   • The First Name and Last Name fields currently only check if the input is non-empty.
   • Special characters, numbers, or emojis are allowed through. Please update the validation to ensure name fields only accept letters, spaces, hyphens, and apostrophes.

Once these issues are addressed, this should be ready to go. Thanks!

[sawantgayatri19]

Hi @akshith312,

Reviewed this PR along with the full history of feedback so far. Summarizing where things stand so we can get this closed out:

Blocking issues (need to be resolved before this can merge):

Name field validation is still insufficient. This has been flagged by multiple reviewers since May (amaresh2001, Abhi-R0211, mahathiganimi, AnshShah-18, sitaram1921, kzou55, iAbhi001) and doesn't appear to be fixed yet. First Name / Last Name currently only check for non-empty, and still accept numbers, special characters, emojis, single characters, and unlimited length. Please update to:
Allow only letters, spaces, hyphens, and apostrophes
Enforce a minimum length (~2 characters)
Enforce a reasonable maximum length (~50–100 characters)
Merge conflicts with development in JobApplicationForm.jsx and JobApplicationForm.module.css are still unresolved (flagged since May 14 by kunchalasireesha, confirmed still present by BosuBose132 recently). This needs to be resolved before the PR can be merged regardless of review status.

Everything else looks solid — email/phone/location/timezone validation, empty-submission blocking, and dark mode all check out based on my testing and the extensive prior review history.

I've logged the smaller UX suggestions from this thread (toast vs. inline errors, required-field indicators, timezone picker UX, duplicate questions, etc.) in the Bugs doc as non-blocking follow-ups so they don't hold up this PR further — those can be addressed in separate tickets.

Once the name validation and merge conflicts are handled, this should be ready for a final round.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[mahathiganimi]

Updated this PR with the latest development branch and resolved the existing merge conflicts.

Addressed the remaining validation blockers:

Added Name validation allowing only letters, spaces, hyphens, and apostrophes
Enforced Name length between 2 and 100 characters
Restored email validation
Restored phone number validation using libphonenumber-js
Added required location validation
Added required timezone selection using moment-timezone
Preserved empty-submission blocking
Added inline validation/error states for the profile fields
Fixed the missing job application submission endpoint

Tested invalid/empty inputs and confirmed that a valid application submits successfully to the backend.

Merge conflicts with the latest development have also been resolved. Ready for re-review.