Expand accordion upon first validation error of a form

Question

I have an accordion in react-bootstrap and a form with validation in it. Some form fields are on the first page of the accordion and some are on the second page. Upon validation error how can I expand the accordion page that contains the first invalid field?

I managed to get the first invalid form field, but I am unable to determine which accordion page contains this field.

Answer 1

If you have the first invalid form field then you can use closest to find it's accordion card via the class 'collapse'. Add 'show' to its classes so it will open then you can scroll to the invalid element via scrollIntoView

 handleSubmit = (event) => { const form = event.currentTarget; if (form.checkValidity() === false) { let firstInvalidFieldInTheForm = form.querySelectorAll(':invalid')[0]; let ancestorAccordion = firstInvalidFieldInTheForm.closest(".collapse"); ancestorAccordion.classList.add("show") firstInvalidFieldInTheForm.scrollIntoView(); event.preventDefault(); event.stopPropagation(); }else{ this.handleSaveButtonClick(); } this.setState({validated: true}); };