Mandatory Fields Validation Not Working on Page

[rajeshcherukumalli]

Mandatory field validation is not being handled properly across multiple forms in the Case Filing process. Since FormComposerV2 does not check for required fields, users are unable to see which fields are missing on various pages.

Proposed Solution:
Implement a modal across all case filing pages that lists missing mandatory fields for each complainant. This will provide clear visibility of incomplete fields and ensure accurate form submission.

Impact:
Users may submit incomplete information without realizing required fields are missing.
No visual indication of errors, leading to delays in the filing process.
Expected Behavior:
For every page in the case filing process, clicking "Continue" should trigger a modal displaying a list of missing mandatory fields, ensuring all required data is provided before proceeding.

[anshumanth-egov]

Ideal fix: FormComposerV2 must check for required fields in multiple forms the same way it does for single forms so we can maintain a consistent way of handling missing mandatory fields.

[ashishbeehyv]

hi @anshumanth-egov here is the config for Advocate details screen:
const advocateDetailsFormConfig = [
{
body: [
{
type: "component",
component: "MultipleAdvocatesAndPip",
key: "multipleAdvocatesAndPip",
labelHeading : "CS_ADVOCATE_HEADING",
withoutLabel: true,
populators: {
isDependent: true,
inputs: [
{
type: "radioInput",
label: "CS_IF_COMPLAINANT_IS_PIP",
name: "isComplainantPip",
options: [
{
code: "YES",
name: "Yes",
isEnabled: true,
},
{
code: "NO",
name: "No",
isEnabled: true,
},
],
},
{
type: "textInput",
label: "FIRST_NAME",
name: "firstName",
},
{
type: "textInput",
label: "MIDDLE_NAME_OPTIONAL",
name: "middleName",
},
{
type: "textInput",
label: "LAST_NAME",
name: "lastName",
},
{
fileKey: "vakalatnamaFileUpload",
type: "DragDropComponent",
name: "document",
isDocDependentOn: "multipleAdvocatesAndPip",
isDocDependentKey: "showVakalatNamaUpload",
documentHeader: "UPLOAD_VAKALATNAMA",
infoTooltipMessage: "UPLOAD_VAKALATNAMA",
uploadGuidelines: "UPLOAD_DOC_50",
maxFileSize: 50,
maxFileErrorMessage: "CS_FILE_LIMIT_50_MB",
fileTypes: ["JPG", "PDF", "PNG"],
isMultipleUpload: true,
downloadTemplateText: "VAKALATNAMA_TEMPLATE_TEXT",
downloadTemplateLink: "https://pucarfilestore.blob.core.windows.net/pucar-filestore/kl/Vakalat.Template.docx",
},
{
infoHeader: "CS_PLEASE_NOTE",
infoText: "AFFIDAVIT_NECESSARY_FOR_PIP",
infoTooltipMessage: "ADVOCATE_DETAIL_NOTE",
type: "InfoComponent",
},
{
fileKey: "pipAffidavitFileUpload",
type: "DragDropComponent",
name: "document",
isDocDependentOn: "multipleAdvocatesAndPip",
isDocDependentKey: "showAffidavit",
documentHeader: "UPLOAD_AFFIDAVIT",
uploadGuidelines: "UPLOAD_DOC_50",
maxFileSize: 50,
maxFileErrorMessage: "CS_FILE_LIMIT_50_MB",
fileTypes: ["JPG", "PDF", "PNG"],
isMultipleUpload: true,
},
],
},
},
],
},
];

export const advocateDetailsConfig = {
formconfig: advocateDetailsFormConfig,
header: "CS_ADVOCATE_DETAILS_HEADING",
subtext: "CS_ADVOCATE_DETAILS_SUBTEXT",
className: "advocate-detail",
selectDocumentName: {
vakalatnamaFileUpload: "UPLOAD_VAKALATNAMA",
pipAffidavitFileUpload: "UPLOAD_PIP_AFFIDAVIT",
},
};

[ashishbeehyv]

here is the config for complainant Details:
{
"data": {
"header": "CS_COMPLAINT_DETAIL_HEADING",
"subtext": "CS_COMPLAINT_DATA_ENTRY_INFO",
"className": "complainant",
"formconfig": [
{
"body": [
{
"key": "complainantType",
"head": "SELECT_COMPLAINANT_TYPE",
"name": "complainantType",
"type": "component",
"notes": {
"key": "personalDetailsNote",
"type": "component",
"component": "SelectCustomNote",
"populators": {
"inputs": [
{
"type": "InfoComponent",
"infoText": "CS_PLEASE_CONTACT_NYAY_MITRA_TEXT",
"infoHeader": "CS_PLEASE_COMMON_NOTE",
"infoTooltipMessage": "CS_NOTE_TOOLTIP_RESPONDENT_PERSONAL_DETAILS"
}
]
},
"withoutLabel": true
},
"component": "CustomRadioInfoComponent",
"populators": {
"type": "radioButton",
"error": "CORE_REQUIRED_FIELD_ERROR",
"label": "SELECT_COMPLAINANT_TYPE",
"required": false,
"mdmsConfig": {
"select": "(data) => {return data['case'].ComplainantRespondentType?.map((item) => {return item;});}",
"masterName": "ComplainantRespondentType",
"moduleName": "case"
},
"optionsKey": "code",
"customStyle": {
"gap": "40px",
"alignItems": "center",
"flexDirection": "row"
},
"isDependent": true,
"isMandatory": true
},
"isMandatory": true,
"withoutLabel": true,
"noteDependentOn": "complainantVerification.individualDetails"
}
]
},
{
"body": [
{
"key": "complainantTypeOfEntity",
"type": "dropdown",
"label": "TYPE_OF_ENTITY",
"populators": {
"name": "complainantTypeOfEntity",
"type": "radioButton",
"error": "CORE_REQUIRED_FIELD_ERROR",
"label": "SELECT_RESPONDENT_TYPE",
"styles": {
"maxWidth": "100%",
"marginBottom": "10px"
},
"required": false,
"mdmsConfig": {
"select": "(data) => {return data['case'].TypeOfEntity?.map((item) => {return item;});}",
"masterName": "TypeOfEntity",
"moduleName": "case"
},
"optionsKey": "code",
"isMandatory": true
},
"isMandatory": true
}
],
"dependentKey": {
"complainantType": [
"showCompanyDetails"
]
}
},
{
"body": [
{
"key": "complainantVerification",
"name": "mobileNumber",
"type": "component",
"error": "ERR_HRMS_INVALID_MOB_NO",
"label": "CS_COMPLAINANT_MOBILE_NUMBER",
"component": "VerifyPhoneNumber",
"populators": {},
"validation": {
"pattern": {
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "contact"
},
"required": true,
"maxLength": 10,
"minLength": 10
},
"isMandatory": true,
"updateLabel": {
"key": "label",
"value": "CS_REPRESENTATIVE_MOBILE_NUMBER"
},
"defaultLabel": {
"key": "label",
"value": "CS_COMPLAINANT_MOBILE_NUMBER"
},
"withoutLabel": true,
"updateLabelOn": "complainantType.showCompanyDetails",
"componentInFront": "+91",
"disableConfigKey": "individualDetails",
"disableConfigFields": [
"firstName",
"middleName",
"lastName",
"pincode",
"pincode",
"state",
"district",
"city",
"locality",
"addressDetails",
"dateOfBirth"
],
"isVerifiedOtpDisabledKey": "isDuplicateNumber"
}
],
"dependentKey": {
"complainantType": [
"commonFields"
]
}
},
{
"body": [
{
"key": "complainantId",
"type": "component",
"component": "VerificationComponent",
"populators": {
"name": "complainantId",
"inputs": [
{
"name": "complainantId",
"label": "COMPLAINANT_ID",
"updateLabel": {
"key": "label",
"value": "CS_ENTITY_ID"
},
"defaultLabel": {
"key": "label",
"value": "COMPLAINANT_ID"
},
"updateLabelOn": "complainantType.showCompanyDetails",
"verificationOn": "complainantVerification.individualDetails"
}
],
"customStyle": {
"marginTop": 20
}
},
"isMandatory": true,
"withoutLabel": true
}
],
"dependentKey": {
"complainantType": [
"commonFields"
]
}
},
{
"body": [
{
"type": "text",
"label": "FIRST_NAME",
"populators": {
"name": "firstName",
"error": "FIRST_LAST_NAME_MANDATORY_MESSAGE",
"validation": {
"title": "",
"pattern": {
"message": "CORE_COMMON_APPLICANT_NAME_INVALID",
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "userName"
},
"minLength": 1,
"patternType": "Name"
}
},
"isMandatory": true
},
{
"type": "text",
"label": "MIDDLE_NAME",
"populators": {
"name": "middleName",
"validation": {
"title": "",
"pattern": {
"message": "CORE_COMMON_APPLICANT_NAME_INVALID",
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "userName"
},
"patternType": "Name"
}
},
"isMandatory": false,
"labelChildren": "optional"
},
{
"type": "text",
"label": "LAST_NAME",
"populators": {
"name": "lastName",
"validation": {
"title": "",
"pattern": {
"message": "CORE_COMMON_APPLICANT_NAME_INVALID",
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "userName"
},
"patternType": "Name"
}
},
"isMandatory": false,
"labelChildren": "optional"
},
{
"type": "text",
"label": "AGE",
"populators": {
"name": "complainantAge",
"error": "AGE_VALIDATION",
"validation": {
"maxLength": 3,
"patternType": "Number"
}
},
"isMandatory": true
}
],
"head": "CS_COMMON_COMPLAINANT_DETAIL",
"updateLabel": {
"key": "head",
"value": "CS_COMMON_ENTITY_DETAIL"
},
"defaultLabel": {
"key": "head",
"value": "CS_COMMON_COMPLAINANT_DETAIL"
},
"dependentKey": {
"complainantType": [
"commonFields"
]
},
"updateLabelOn": "complainantType.showCompanyDetails"
},
{
"body": [
{
"type": "text",
"label": "DESIGNATION",
"populators": {
"name": "complainantDesignation",
"error": "CORE_REQUIRED_FIELD_ERROR",
"validation": {
"title": "",
"pattern": {
"message": "CORE_COMMON_APPLICANT_NAME_INVALID",
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "userName"
},
"patternType": "Name"
}
},
"isMandatory": false,
"labelChildren": "optional"
}
],
"dependentKey": {
"complainantType": [
"showCompanyDetails"
]
}
},
{
"body": [
{
"key": "complainantCompanyName",
"type": "text",
"label": "company_Name",
"populators": {
"name": "complainantCompanyName",
"error": "FIRST_LAST_NAME_MANDATORY_MESSAGE",
"styles": {
"minWidth": "100%"
},
"validation": {
"title": "",
"pattern": {
"message": "CORE_COMMON_NON_NUMERIC_TYPE_IN",
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "nonNumericString"
},
"minLength": 1,
"patternType": "Name"
},
"customStyle": {
"minWidth": "100%"
},
"labelStyles": {
"padding": "8px"
}
},
"isMandatory": true
},
{
"key": "companyDetailsUpload",
"type": "component",
"label": "COMPANY_DOCUMENT_DETAILS",
"component": "SelectCustomDragDrop",
"populators": {
"inputs": [
{
"name": "document",
"type": "DragDropComponent",
"fileTypes": [
"JPG",
"PDF",
"PNG"
],
"isOptional": "CS_IS_OPTIONAL",
"isMandatory": false,
"maxFileSize": 50,
"documentHeader": "COMPANY_DOCUMENT_DETAILS",
"isMultipleUpload": true,
"uploadGuidelines": "UPLOAD_DOC_50",
"documentHeaderStyle": {
"textAlign": "start"
},
"maxFileErrorMessage": "CS_FILE_LIMIT_50_MB"
}
]
},
"isMandatory": false,
"withoutLabel": true
}
],
"head": "CS_RESPONDENT_COMPANY_DETAIL",
"dependentKey": {
"complainantType": [
"showCompanyDetails"
]
}
},
{
"body": [
{
"key": "addressDetails",
"type": "component",
"addUUID": true,
"component": "SelectComponents",
"populators": {
"inputs": [
{
"name": "typeOfAddress",
"type": "Radio",
"label": "CS_TYPE_OF_ADDRESS",
"options": [],
"showOptional": true
},
{
"name": "pincode",
"type": "text",
"label": "PINCODE",
"validation": {
"max": "9999999",
"title": "",
"errMsg": "ADDRESS_PINCODE_INVALID",
"pattern": "[0-9]+",
"maxlength": 7,
"minlength": 6,
"isRequired": true,
"patternType": "Pincode"
},
"isMandatory": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "state",
"type": "text",
"label": "STATE",
"validation": {
"title": "",
"errMsg": "CORE_COMMON_APPLICANT_STATE_INVALID",
"pattern": {
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "name"
},
"isRequired": true,
"patternType": "Name"
},
"isMandatory": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "district",
"type": "text",
"label": "DISTRICT",
"validation": {
"title": "",
"errMsg": "CORE_COMMON_APPLICANT_DISTRICT_INVALID",
"pattern": {
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "name"
},
"isRequired": true,
"patternType": "Name"
},
"isMandatory": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "city",
"type": "text",
"label": "CITY/TOWN",
"validation": {
"errMsg": "CORE_COMMON_APPLICANT_CITY_INVALID",
"isRequired": true,
"patternType": "Name"
},
"isMandatory": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "locality",
"type": "text",
"label": "ADDRESS",
"validation": {
"errMsg": "CORE_COMMON_APPLICANT_ADDRESS_INVALID",
"pattern": {
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "address"
},
"maxlength": 256,
"minlength": 2,
"isRequired": true
},
"isMandatory": true,
"inputFieldClassName": "user-details-form-style"
}
],
"validation": {}
},
"withoutLabel": true
}
],
"head": "CS_COMPLAINANT_LOCATION",
"dependentKey": {
"complainantType": [
"complainantLocation"
]
}
},
{
"body": [
{
"key": "addressCompanyDetails",
"type": "component",
"addUUID": true,
"component": "SelectComponents",
"populators": {
"inputs": [
{
"name": "typeOfAddress",
"type": "Radio",
"label": "CS_TYPE_OF_ADDRESS",
"options": [],
"showOptional": true
},
{
"name": "pincode",
"type": "text",
"label": "PINCODE",
"validation": {
"max": "9999999",
"title": "",
"errMsg": "ADDRESS_PINCODE_INVALID",
"pattern": "[0-9]+",
"maxlength": 7,
"minlength": 6,
"isRequired": true,
"patternType": "Pincode"
},
"isMandatory": true,
"shouldBeEnabled": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "state",
"type": "text",
"label": "STATE",
"validation": {
"title": "",
"errMsg": "CORE_COMMON_APPLICANT_STATE_INVALID",
"pattern": {
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "name"
},
"isRequired": true,
"patternType": "Name"
},
"isMandatory": true,
"shouldBeEnabled": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "district",
"type": "text",
"label": "DISTRICT",
"validation": {
"title": "",
"errMsg": "CORE_COMMON_APPLICANT_DISTRICT_INVALID",
"pattern": {
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "name"
},
"isRequired": true,
"patternType": "Name"
},
"isMandatory": true,
"shouldBeEnabled": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "city",
"type": "text",
"label": "CITY/TOWN",
"validation": {
"errMsg": "CORE_COMMON_APPLICANT_CITY_INVALID",
"isRequired": true,
"patternType": "Name"
},
"isMandatory": true,
"shouldBeEnabled": true,
"inputFieldClassName": "user-details-form-style"
},
{
"name": "locality",
"type": "text",
"label": "ADDRESS",
"validation": {
"errMsg": "CORE_COMMON_APPLICANT_ADDRESS_INVALID",
"pattern": {
"masterName": "commonUiConfig",
"moduleName": "patternValidation",
"patternType": "address"
},
"maxlength": 256,
"minlength": 2,
"isRequired": true
},
"isMandatory": true,
"shouldBeEnabled": true,
"inputFieldClassName": "user-details-form-style"
}
],
"validation": {}
},
"withoutLabel": true
}
],
"head": "CS_COMPANY_LOCATION",
"dependentKey": {
"complainantType": [
"showCompanyDetails"
]
}
}
],
"isOptional": false,
"addFormText": "ADD_COMPLAINANT",
"formItemName": "CS_COMPLAINANT"
}
}

[jagankumar-egov]

hi @ashishbeehyv

I could see there were multiple custom components,
If it is a custom component, then who ever implementing the custom component they need to take care of validations
Reference for custom component validations

you can explore the default form composer plaground and its behaviour using this link Credentials (TEMP/Temp@123)

Refer the below attachments

cc. @anshumanth-egov

[ashishbeehyv]

hi @jagankumar-egov, even if we do not use custom components then in case of multiple forms, it is validating errors for only last form on clicking submit button. So if we correctly fill the values in the last form, the validation gets skipped for rest of the forms on clicking submit.

[nipunarora-eGov]

Hey @jagankumar-egov they are using multiple instances of formComposer as one form to support their UI instead of updating the config that is why this issue is occurring. I asked them to update the config dynamically instead.

[atulgupta2024]

@jagankumar-egov please help

cc @eGovMan