单个字段集的内置 HTML5 表单验证？

Question

是否可以在单个字段集上使用浏览器的内置 HTML5 表单验证？

我正在构建一个多步骤表单，但想使用浏览器的内置验证工具来检测和显​​示当前显示的字段集上输入的验证消息，而不是整个表单（Chrome 在这里给出错误是因为隐藏字段集中的输入不可聚焦，此外我不希望它在单击第一个按钮时验证第二个输入）

我知道您可以进行自定义 JS 验证和错误显示，但我想知道是否可以在单个字段集上使用浏览器验证。

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

我已经设法得到了我需要的东西。

• 从页面加载时不显示的所有输入中删除required
• 当显示下一个字段集的函数运行时，它将新显示的字段集上的所有输入（复选框除外）设置为required
• 如果你想回到前一个字段集，该函数会从你刚刚隐藏的字段集中的输入中删除required，否则你将无法再次前进（因为<input required>在隐藏的字段集无法聚焦，htmll5 验证中断）
• 在最后一步，表单按预期提交

我包含我的代码以防它可以帮助某人。

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>