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"
}
}