¿Es posible utilizar la validación de formulario HTML5 integrada de los navegadores en un conjunto de campos individual?
Estoy creando un formulario de varios pasos, pero me gustaría usar la herramienta de validación integrada del navegador para detectar y mostrar mensajes de validación para entradas en el conjunto de campos que se muestra actualmente, en lugar de en todo el formulario (Chrome da un error aquí porque la entrada en el campo oculto no se puede enfocar, además no quiero que valide la segunda entrada cuando se hace clic en el primer botón)
Sé que puede hacer una validación JS personalizada y una visualización de errores, pero quiero saber si es posible usar la validación del navegador en un conjunto de campos individual.
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>Me las he arreglado para conseguir lo que necesito así.
required de todas las entradas que no se muestran cuando se carga la páginarequiredrequired de las entradas en el conjunto de campos que acaba de ocultar; de lo contrario, no podrá avanzar de nuevo (porque la <input required> en el conjunto de campos oculto no puede estar enfocado, la validación htmll5 se rompe)Incluyo mi código en caso de que pueda ayudar a alguien.
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>