Feature: Add step validation modal for admission form #235
Conversation
|
@Payel-Manna is attempting to deploy a commit to the code-with-abhishek-kumar's projects Team on Vercel. A member of the Team first needs to authorize it. |
Summary of ChangesHello @Payel-Manna, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a critical feature for the multi-step admission form: step-by-step validation. It ensures that users complete all necessary fields before advancing to the next stage, thereby preventing incomplete submissions. A dedicated modal clearly communicates any missing information, and form progress is securely saved to session storage, enhancing both data integrity and user experience. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a validation modal for a multi-step admission form. The changes include a new StepValidateModal component and updated logic in the Steps component to validate form fields before proceeding to the next step. While the feature is a great addition for user experience, I've found a critical issue in the validation logic within Steps.jsx. The current implementation validates incorrect fields for some steps and completely omits validation for many required fields and entire steps. I've provided a detailed comment and a code suggestion to refactor the validation logic to be more correct, complete, and maintainable. The rest of the changes look good.
| const validateStep = () => { | ||
| const requiredFields = []; | ||
|
|
||
| const missing = []; | ||
| if (activeStep === 0) { | ||
| requiredFields.push('firstName', 'lastName', 'email'); | ||
| } else if (activeStep === 1) { | ||
| requiredFields.push('fatherName', 'motherName'); | ||
| } else if (activeStep === 4 && !image) { | ||
| setIsModalOpen(true); | ||
| setMissingFields(['Profile Picture']); | ||
| return false; | ||
| } | ||
| for (let field of requiredFields) { | ||
| if (!formData[field] || formData[field].trim() === '') { | ||
| const formatted = field | ||
| .replace(/([A-Z])/g, ' $1') | ||
| .replace(/^./, str => str.toUpperCase()); | ||
| missing.push(formatted); | ||
| } | ||
| } | ||
|
|
||
| if (missing.length > 0) { | ||
| setMissingFields(missing); | ||
| setIsModalOpen(true); | ||
| return false; | ||
| } | ||
|
|
||
| sessionStorage.setItem( | ||
| 'admissionFormData', | ||
| JSON.stringify(formData), | ||
| ); | ||
| return true; | ||
| }; |
There was a problem hiding this comment.
There are several critical issues with the step validation logic:
-
Incorrect Field Validation: The validation for
activeStep === 1checks forfatherNameandmotherName, but these fields belong to theYourInfocomponent, which is displayed atactiveStep === 0. The fields for theParentsInfocomponent (e.g.,Gname), which are displayed atactiveStep === 1, are not being validated. -
Incomplete Validation: Many fields marked as
requiredin the form components are not being validated. For example, inYourInfo.jsx(activeStep === 0), fields likeAadharCardNumber,contactNumber,dateOfBirth, and the entire address are required but are missing from the validation check. -
Missing Step Validation: There is no validation for steps 2 (
AreyouHuman), 3 (Grades), and 4 (UniversityInfo), except for the profile picture on the last step. -
Potential Runtime Error: The check
formData[field].trim() === ''can cause a runtime error ifformData[field]is a number (e.g., from an input withtype='number'), as numbers do not have a.trim()method.
This can lead to incomplete data being saved and passed to the next step. To make the validation more robust and maintainable, I recommend defining the required fields for each step in a configuration object. This will make the validation logic cleaner and easier to update.
const validateStep = () => {
const stepValidationConfig = {
0: [
'firstName',
'lastName',
'email',
'fatherName',
'motherName',
'AadharCardNumber',
'contactNumber',
'dateOfBirth',
'gender',
'nationality',
'street',
'city',
'state',
'pinCode',
],
1: ['Gname', 'Grelation', 'GcontactNumber'],
// Step 2 (Are you Human?) needs custom validation if required.
3: ['tenthBoard', 'tenthGrade', 'twelfthMarks', 'twelfthGrade'],
4: ['university', 'courseName', 'mode'],
};
const formatFieldName = field =>
field
.replace(/([A-Z])/g, ' $1')
.replace(/^./, str => str.toUpperCase());
const missing = [];
const requiredFields = stepValidationConfig[activeStep] || [];
for (const field of requiredFields) {
if (!formData[field] || String(formData[field]).trim() === '') {
missing.push(formatFieldName(field));
}
}
// Special case for image upload on the last step
if (activeStep === 4 && !image) {
missing.push('Profile Picture');
}
if (missing.length > 0) {
setMissingFields(missing);
setIsModalOpen(true);
return false;
}
sessionStorage.setItem(
'admissionFormData',
JSON.stringify(formData),
);
return true;
};
There was a problem hiding this comment.
@Payel-Manna, This gemini suggest show all the filed to be validated in the model.
Your implementation:
With Gemini Suggestion:
However, we won't need to show validation error like this in the modal.
|
Hi @sanjaysah101 and @abhishek-nexgen-dev 👋 This PR implements the step validation modal for the admission form as per #232.
Please review when you get a chance. 🚀 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Thank you for the automated review @gemini-code-assist 🙌 |
|
You're welcome, @Payel-Manna! I'll be here if you or the maintainers have any further questions or need additional review assistance. Looking forward to seeing this feature merged! 😊 |
|
Thank you @gemini-code-assist for the detailed review and feedback! 🙌 |
|
You're most welcome, @Payel-Manna! I'm glad the summary was helpful. I'm currently finalizing the detailed review comments and will post them shortly. Thank you for your patience! 😊 |
|
@sanjaysah101 can you review this pr |
|
Hi @sanjaysah101 and @abhishek-nexgen-dev 👋 Just following up on this PR for the step validation modal for the admission form. Thanks! 🙏 |
|
Hi @Payel-Manna, I have reviewed this MR and found few major bugs:
Bug.in.admission.page.mp4 |
|
|
Hi @Payel-Manna, I have update the task description. Kindly check it |
|
OK I will be checking this. |
|
Hi @sanjaysah101 Fixed the issue where input values were cleared after closing the modal (no more page refresh). Validation errors are now shown below the input fields, visible only when clicking “Next”. Regarding backend validation, I couldn’t find the exact schema file (e.g., AdmissionSchema.Joi.js) in the backend repo. Please review the current changes and let me know if any further adjustments are needed. 🚀 |
Still the UI is broken: 
Regarding backend validation, @abhishek-nexgen-dev can assist you on this |
|
Hi @sanjaysah101, thanks for the review! Regarding backend validation, @abhishek-nexgen-dev could you confirm the schema file or share the validation rules? I want to make sure frontend validation aligns perfectl |
|
Ok! |
@sanjaysah101 i already added validation in backend |
@sanjaysah101 i think there is some issue in frontend the backend work properly |
However, we should add the validation in client side too for better user experience (UX) |
|
@Payel-Manna What's the current status payel |
|
Sorry for the delay! I have my end-term exam today, so I’ll be updating the PR by EOD. |
@Payel-Manna try to do this earlier |
|
@Payel-Manna are you facing any issue |
|
I’m really sorry for the delay, @abhishek-nexgen-dev. I’ve been caught up with my end-term exams and facing some Wi-Fi issues, so I couldn’t find enough time to work on the fixes. |
…rs only on Next click
|
Hi @abhishek-nexgen-dev @sanjaysah101, |
|
@Payel-Manna okay |
|
Hi @abhishek-nexgen-dev @sanjaysah101, |
|
@Payel-Manna ok |
|
@Payel-Manna can you please attech a video |
abhishek-nexgen-dev
merged commit 258f2fb
into
NexGenStudioDev:dev
3 participants
Feature Pull Request Template ✨
We welcome all contributions to this project! 🚀
Related Issue 📎
Proposed Changes 📝
StepValidateModal.jsxcomponent to show a modal with missing fields.Steps.jsxto validate each step before proceeding.What File You Changed
src/components/Templates/admission/StepValidateModal.jsx— Modal component for step validation.src/components/Templates/admission/Steps.jsx— Added step validation logic and integrated modal.Additional Info 📌
Feature Description 🌟
What is the new feature?
A validation modal that shows missing required fields for each step of the admission form.
How does it work?
Each step is checked for required inputs; if any field is missing, the modal opens listing the missing fields. Image upload on the last step is also validated.
Why is this feature needed?
Prevents incomplete form submissions and improves clarity for users filling out multi-step forms.
Implementation Details 🔧
StepValidateModal.jsx— Functional component withisOpen,onClose,title,message, andmissingFieldsprops.Steps.jsx—validateStep()checks required fields per step, sets missing fields, and opens modal if validation fails.Checklist ✅