Question T17071
Visible to All Users

focusFirstErrorQuestion methods has working if question is under nested panel

created a year ago (modified a year ago)

Hi Team,

we are using focusFirstErrorQuestion methods to focus on error question, it was working fine for normal page , but if we have page -> inside panel 1 -> inside one more Panel -> in that having question that has error, not working.

please find below JSON for refrence

JavaScript
JSON = { "title": "COVID-19 Screening Form", "description": "All fields with an asterisk (*) are required fields and must be filled out in order to process the information in strict confidentiality.", "logo": "[https://api.surveyjs.io/private/Surveys/files?name=fe375fa6-4c8c-40ab-a9c7-51a97b7ad500](https://api.surveyjs.io/private/Surveys/files?name=fe375fa6-4c8c-40ab-a9c7-51a97b7ad500)", "logoFit": "cover", "logoPosition": "right", "pages": [ { "name": "patient-info", "elements": [ { "type": "panel", "name": "full-name", "elements": [ { "type": "text", "name": "first-name", "title": "First name", "isRequired": true, "maxLength": 25 }, { "type": "text", "name": "last-name", "startWithNewLine": false, "title": "Last name", "isRequired": true, "maxLength": 25 } ], "title": "Full name" }, { "type": "panel", "name": "personal-info", "elements": [ { "type": "text", "name": "ssn", "title": "Social Security number", "isRequired": true, "validators": [ { "type": "regex", "text": "Your SSN must be a 9-digit number", "regex": "^\\d{9}$" } ], "maxLength": 9 }, { "type": "text", "name": "birthdate", "startWithNewLine": false, "title": "Date of Birth", "isRequired": true, "inputType": "date" } ] } ], "title": "Patient Information" }, { "name": "symptoms-and-contacts", "elements": [ { "type": "checkbox", "name": "symptoms", "title": "Have you experienced any of the following symptoms of COVID-19 within the last 48 hours?", "isRequired": true, "choices": [ "Fever or chills", "New and persistent cough", "Shortness of breath or difficulty breathing", "Fatigue", "Muscle or body aches", "New loss of taste or smell", "Sore throat" ], "showNoneItem": true, "noneText": "No symptoms" }, { "type": "boolean", "name": "contacted-person-with-symptoms", "title": "Have you been in contact with anyone in the last 14 days who is experiencing these symptoms?" }, { "type": "radiogroup", "name": "contacted-covid-positive", "title": "Have you been in contact with anyone who has since tested positive for COVID-19?", "choices": [ "Yes", "No", "Not sure" ] }, { "type": "boolean", "name": "travelled", "title": "Have you travelled abroad in the last 14 days?" }, { "type": "text", "name": "travel-destination", "visibleIf": "travelled = true", "title": "Where did you go?" }, { "type": "boolean", "name": "tested-covid-positive", "title": "Have you tested positive for COVID-19 in the past 10 days?" }, { "type": "boolean", "name": "awaiting-covid-test", "title": "Are you currently awaiting results from a COVID-19 test?" }, { "type": "paneldynamic", "name": "emergency-contacts", "visibleIf": "(({tested-covid-positive} = true or {contacted-covid-positive} = 'Yes') or ({symptoms} notempty and {symptoms} notcontains 'none'))", "title": "Emergency Contacts", "description": "If possible, it's best to specify at least TWO emergency contacts.", "isRequired": true, "templateElements": [ { "type": "text", "name": "emergency-first-name", "title": "First name" }, { "type": "text", "name": "emergency-last-name", "startWithNewLine": false, "title": "Last name" }, { "type": "text", "name": "emergency-relationship", "title": "Relationship" }, { "type": "text", "name": "emergency-phone", "startWithNewLine": false, "title": "Phone number", "inputType": "tel" } ], "panelsState": "firstExpanded", "confirmDelete": true, "panelAddText": "Add a new contact person" }, { "type": "comment", "name": "additional-info", "title": "Additional information" }, { "type": "text", "name": "date", "title": "Date", "inputType": "date" }, { "type": "signaturepad", "name": "signature", "startWithNewLine": false, "title": "Signature" } ], "title": "Current Symptoms" }, { "name": "page1", "elements": [ { "type": "paneldynamic", "name": "question1", "templateElements": [ { "type": "paneldynamic", "name": "question2", "templateElements": [ { "type": "checkbox", "name": "question3", "choices": [ "Item 1", "Item 2", "Item 3" ] }, { "type": "text", "name": "question4" }, { "type": "dropdown", "name": "question5", "choices": [ "Item 1", "Item 2", "Item 3" ] } ], "allowAddPanel": false, "allowRemovePanel": false, "panelCount": 1, "minPanelCount": 1 } ], "allowAddPanel": false, "allowRemovePanel": false, "panelCount": 1, "minPanelCount": 1, "maxPanelCount": 1 } ] } ], "showQuestionNumbers": "off", "questionErrorLocation": "bottom", "completeText": "Submit", "questionsOnPageMode": "singlePage", "showPreviewBeforeComplete": "showAnsweredQuestions", "widthMode": "static", "width": "1000px" }

Answers approved by surveyjs Support

created a year ago

Hello Nikhil,
Thank you for sharing the demo. Would you please clarify which particular input you expect to be focused by the page.focusFirstErrorQuestion method? If you're talking about a Dynamic Panel (emergency-contacts), let me note that the inner panel input fields doesn't have the isRequired: true option. Therefore, they are not focused. If you wish to focus particular input fields within a dynamic panel, enable the isRequired option for panel template questions. Consider the updated survey JSON:

JSON
{ "title": "COVID-19 Screening Form", "description": "All fields with an asterisk (*) are required fields and must be filled out in order to process the information in strict confidentiality.", "logo": "[https://api.surveyjs.io/private/Surveys/files?name=fe375fa6-4c8c-40ab-a9c7-51a97b7ad500](https://api.surveyjs.io/private/Surveys/files?name=fe375fa6-4c8c-40ab-a9c7-51a97b7ad500)", "logoFit": "cover", "logoPosition": "right", "pages": [ { "name": "patient-info", "elements": [ { "type": "panel", "name": "full-name", "elements": [ { "type": "text", "name": "first-name", "title": "First name", "isRequired": true, "maxLength": 25 }, { "type": "text", "name": "last-name", "startWithNewLine": false, "title": "Last name", "isRequired": true, "maxLength": 25 } ], "title": "Full name" }, { "type": "panel", "name": "personal-info", "elements": [ { "type": "text", "name": "ssn", "title": "Social Security number", "isRequired": true, "validators": [ { "type": "regex", "text": "Your SSN must be a 9-digit number", "regex": "^\\d{9}$" } ], "maxLength": 9 }, { "type": "text", "name": "birthdate", "startWithNewLine": false, "title": "Date of Birth", "isRequired": true, "inputType": "date" } ] } ], "title": "Patient Information" }, { "name": "symptoms-and-contacts", "elements": [ { "type": "checkbox", "name": "symptoms", "title": "Have you experienced any of the following symptoms of COVID-19 within the last 48 hours?", "isRequired": true, "choices": [ "Fever or chills", "New and persistent cough", "Shortness of breath or difficulty breathing", "Fatigue", "Muscle or body aches", "New loss of taste or smell", "Sore throat" ], "showNoneItem": true, "noneText": "No symptoms" }, { "type": "boolean", "name": "contacted-person-with-symptoms", "title": "Have you been in contact with anyone in the last 14 days who is experiencing these symptoms?" }, { "type": "radiogroup", "name": "contacted-covid-positive", "title": "Have you been in contact with anyone who has since tested positive for COVID-19?", "choices": [ "Yes", "No", "Not sure" ] }, { "type": "boolean", "name": "travelled", "title": "Have you travelled abroad in the last 14 days?" }, { "type": "text", "name": "travel-destination", "visibleIf": "travelled = true", "title": "Where did you go?" }, { "type": "boolean", "name": "tested-covid-positive", "title": "Have you tested positive for COVID-19 in the past 10 days?" }, { "type": "boolean", "name": "awaiting-covid-test", "title": "Are you currently awaiting results from a COVID-19 test?" }, { "type": "paneldynamic", "name": "emergency-contacts", "visibleIf": "(({tested-covid-positive} = true or {contacted-covid-positive} = 'Yes') or ({symptoms} notempty and {symptoms} notcontains 'none'))", "title": "Emergency Contacts", "description": "If possible, it's best to specify at least TWO emergency contacts.", "templateElements": [ { "type": "text", "name": "emergency-first-name", "title": "First name", "isRequired": true }, { "type": "text", "name": "emergency-last-name", "startWithNewLine": false, "title": "Last name", "isRequired": true }, { "type": "text", "name": "emergency-relationship", "title": "Relationship", "isRequired": true }, { "type": "text", "name": "emergency-phone", "startWithNewLine": false, "title": "Phone number", "inputType": "tel", "isRequired": true } ], "panelsState": "firstExpanded", "confirmDelete": true, "panelAddText": "Add a new contact person", }, { "type": "comment", "name": "additional-info", "title": "Additional information", }, { "type": "text", "name": "date", "title": "Date", "inputType": "date" }, { "type": "signaturepad", "name": "signature", "startWithNewLine": false, "title": "Signature" } ], "title": "Current Symptoms" }, { "name": "page1", "elements": [ { "type": "paneldynamic", "name": "question1", "templateElements": [ { "type": "paneldynamic", "name": "question2", "templateElements": [ { "type": "checkbox", "name": "question3", "choices": [ "Item 1", "Item 2", "Item 3" ] }, { "type": "text", "name": "question4" }, { "type": "dropdown", "name": "question5", "choices": [ "Item 1", "Item 2", "Item 3" ] } ], "allowAddPanel": false, "allowRemovePanel": false, "panelCount": 1, "minPanelCount": 1 } ], "allowAddPanel": false, "allowRemovePanel": false, "panelCount": 1, "minPanelCount": 1, "maxPanelCount": 1 } ] } ], "showQuestionNumbers": "off", "questionErrorLocation": "bottom", "completeText": "Submit", "questionsOnPageMode": "singlePage", "showPreviewBeforeComplete": "showAnsweredQuestions", "widthMode": "static", "width": "1000px" }

Please let me know if you have any further questions.

    Comments (3)
      JSON
      { "logoPosition": "right", "pages": [ { "name": "Page 1", "elements": [ { "type": "panel", "name": "panel1", "elements": [ { "type": "panel", "name": "panel3", "elements": [ { "type": "checkbox", "name": "checkbox", "title": "checkbox", "isRequired": true, "choices": [ "Item 1", "Item 2", "Item 3" ] }, { "type": "panel", "name": "panel2", "elements": [ { "type": "text", "name": "Inner mandatory field", "title": "Inner mandatory field", "isRequired": true }, { "type": "paneldynamic", "name": "First Dynamic Panel", "title": "First Dynamic Panel", "templateElements": [ { "type": "text", "name": "DP Mandatory field", "title": "DP Mandatory field", "isRequired": true } ] } ] } ] } ] }, { "type": "paneldynamic", "name": "Second Dynamic Panel", "title": "Second Dynamic Panel", "templateElements": [ { "type": "paneldynamic", "name": "P4", "title": "P4", "templateElements": [ { "type": "paneldynamic", "name": "P5", "title": "P5", "isRequired": true, "templateElements": [ { "type": "text", "name": "nested DP mandatory field", "title": "nested DP mandatory field" } ] } ] } ] } ], "title": "Page 1" } ] }

        Hi Jane,

        Thank you for response, Sorry I missed that question is isRequired: true option. But page.focusFirstErrorQuestion not focusing that question

          Hi Everyone,
          I appreciate the update. The nested DP mandatory field is not focused because it doesn't have the isRequired option enabled. You may want to update your survey JSON definition and enable the isRequired option for the target inner field.

          JSON
          { "logoPosition": "right", "pages": [ { "name": "Page 1", "elements": [ { "type": "panel", "name": "panel1", "elements": [ { "type": "panel", "name": "panel3", "elements": [ { "type": "checkbox", "name": "checkbox", "title": "checkbox", "defaultValue": [ "Item 2" ], "isRequired": true, "choices": [ "Item 1", "Item 2", "Item 3" ] }, { "type": "panel", "name": "panel2", "elements": [ { "type": "text", "name": "Inner mandatory field", "title": "Inner mandatory field", "defaultValue": "1", "isRequired": true }, { "type": "paneldynamic", "name": "First Dynamic Panel", "title": "First Dynamic Panel", "templateElements": [ { "type": "text", "name": "DP Mandatory field", "title": "DP Mandatory field", "isRequired": true } ], "panelCount": 1 } ] } ] } ] }, { "type": "paneldynamic", "name": "Second Dynamic Panel", "title": "Second Dynamic Panel", "templateElements": [ { "type": "paneldynamic", "name": "P4", "title": "P4", "templateElements": [ { "type": "paneldynamic", "name": "P5", "title": "P5", // "isRequired": true, "templateElements": [ { "type": "text", "name": "nested DP mandatory field", "title": "nested DP mandatory field", isRequired: true } ], "panelCount": 1 } ], "panelCount": 1 } ], "panelCount": 1 } ], "title": "Page 1" } ] }

          Now, the page.focusFirstErrorQuestion function should correctly focus this nested field.

          Should you have any further questions, please do let me know.