Блог

Главная - Вопросы по программированию - Встроенная проверка формы HTML5 для отдельного набора полей?

Встроенная проверка формы HTML5 для отдельного набора полей?

#javascript #html #forms #validation #required

Вопрос:

Можно ли использовать встроенную в браузеры проверку формы 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>

Ответ №1:

Мне удалось получить то, что мне нужно, вот так.

  • Удалить required из всех входных данных, которые не отображаются при загрузке страницы
  • Когда запускается функция отображения следующего набора полей, она устанавливает все входные данные для вновь отображаемого набора полей (кроме флажков) как required
  • Если вы хотите вернуться к предыдущему набору полей, функция удаляет required входные данные из набора полей, который вы только что скрыли, иначе вы не сможете снова двигаться вперед (поскольку <input required> в скрытом наборе полей невозможно сфокусироваться, проверка html5 прерывается).
  • На последнем шаге форма отправляется, как и ожидалось

Я включаю свой код на случай, если это может кому-то помочь.

 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>
Метки: