Built-in HTML5 form validation for individual fieldset?

Question

Is it possible to use browsers' built-in HTML5 form validation on an individual fieldset?

I'm building a multi step form but would like to use the browser's built-in validation tool to detect and display validation messages for inputs on the currently displayed fieldset, rather than on the entire form (Chrome gives an error here because the input in the hidden fieldset is not focusable, besides I don't want it to validate the second input when the first button is clicked)

I know you can do custom JS validation and error display, but I want to know if it's possible to use the browser validation on an individual fieldset.

 const form = document.getElementById('form') const first = document.getElementById('first') const second = document.getElementById('second') form.addEventListener('submit', (e) => { e.preventDefault(); first.style.display = 'none'; second.style.display = 'block'; })

 <form id="form"> <fieldset id="first"> <legend>first</legend> <input name="firstInput" required> <button>next step</button> </fieldset> <fieldset id="second" style="display: none;"> <legend>second</legend> <input required name="secondInput"> <button>Submit</button> </fieldset> </form>

Answer 1

I've managed to get what I need like this.

• Remove required from all inputs that are not displayed when the page loads
• When the function to show the next fieldset runs, it sets all the inputs on the newly displayed fieldset (except checkboxes) as required
• If you want to move back to the previous fieldset, the function removes required from the inputs in the fieldset you've just hidden, otherwise you wouldn't be able to move forward again (because the <input required> in the hidden fieldset cannot be focused, the htmll5 validation breaks)
• At the last step, the form submits as expected

I'm including my code in case it can help someone.

 form = document.getElementById('Form'); fieldsets = document.querySelectorAll('fieldset'); back = document.getElementById('back'); nextORsubmit = document.getElementById('nextORsubmit'); let i = 0; form.addEventListener('submit', (e) => { if (i < fieldsets.length - 1) { e.preventDefault(); console.log('Validate, but don\'t send form'); fieldsets[i].style.display = 'none'; fieldsets[i+1].style.display = 'block'; back.style.display = 'inline'; i++; // set required on current fieldset inputs, except if they're checkboxes fieldsets[i].querySelectorAll('input:not([type="checkbox"])').forEach (el => { el.required = true; }) } }); back.addEventListener('click', () => { console.log('going back a step'); fieldsets[i].style.display = 'none'; fieldsets[i-1].style.display = 'block'; i--; // remove required on inputs from the next fieldset that we've just hid fieldsets[i+1].querySelectorAll('input:not([type="checkbox"])').forEach (el => { el.required = false; }) // remove back button when you go back to the first step if (i == 0) { back.style.display = 'none'; } })

 #back, fieldset:not(:first-of-type) { display: none; }

 <form id="Form"> <fieldset> <legend>first</legend> <input name="firstInput" required> </fieldset> <fieldset> <legend>second</legend> <input name="secondInput"> </fieldset> <fieldset> <legend>third</legend> <input name="thirdInput"> </fieldset> <button id="back" type="button">Back</button><br> <button id="nextORsubmit">Next</button> </form>