Как выполнить функцию при нажатии enter, только если всё заполнено?

Question

[Егор]

У меня есть 6 input, в каждый из которых можно ввести только 1 букву. Мне надо, чтобы, когда ты ввёл все 6 букв и нажал enter (желательно, но главное не на кнопку), выполнялась функция (которую я сделаю)

HTML

<input class="input1" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=1 style="margin-left: 155px;">
            <input class="input2" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=2>
            <input class="input3" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=3>
            <input class="input4" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=4>
            <input class="input5" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=5>
            <input class="input6" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=6>

JavaScript

const ins = document.querySelectorAll('input');



ins.forEach(i => i.addEventListener('input', onInput))

function onInput(e) {
  e.target.value = e.target.value[e.target.value.length - 1] || "";
  const n = e.target.dataset.n
  const next = document.querySelector(`input[data-n="${+n + 1}"]`)

if(e.target.value == ""){
  if(n == 1) {
  document.querySelector(`input[data-n=1]`).focus();
  }
  else {
  document.querySelector(`input[data-n="${+n - 1}"]`).focus();
  }
  }
  else {
  if (next) {
    next.focus()
  }}
}

Comments

[Henxed]

Вероятней всего у вас кнопка находиться в form вместе с input. Самый простой способ на js, возможно вам кнопку вынести за form и обрабатывать клик по js (ajax)?

Или повесить на <form onsubmit="return validateForm()">

function validateForm() {
  // Проверяем данные в форме
  if (/* данные не проходят проверку */) {
    // Если данные не проходят проверку, то отменяем отправку формы
    event.preventDefault();
    return false;
  }
  else {
    // Если данные проходят проверку, то разрешаем отправку формы
    return true;
  }
}

[Егор]

Henxed, не очень понял, но вроде вы имели ввиду кнопку. Я писал, что лучше без нажатия на кнопку, а каким-то другим действием, к примеру, enter

Answer 1

[Henxed]

Пока всё не будет заполнено, форма не отправиться, как заполниться, тогда Enter сработает. Если на Enter будет что-то другое, то просто вставьте свой код вместо form.submit()

if (e.key === 'Enter' && isValid) {
    form.submit()
 }

Без формы и срабатывания своей функции по нажатию Enter
https://codepen.io/Henxed/pen/zYJpWJP (пример в комментариях, тут конфликт между codepen)

Comments

[Егор]

Как я понял, тут есть 2 варианта: либо ты нажимаешь на кнопку, либо нажимаешь enter, так? И как понять, что форма отправлена?

[Егор]

И зачем там нужна кнопка тогда? Если можно на enter нажать?

[Henxed]

Егор, дописал описание. Там есть проверка, где отправляется форма. В том месте можете добавить функцию для своей цели (уведомления, ajax, замена html и т.д.), а по кнопки нужно будет нажимать кликом, но на кнопку нужно будет уже обработчик повесить, чтобы отправляло.

form.addEventListener("submit", onSubmit);

function onSubmit(event) {
  event.preventDefault(); // Предотвращаем отправку формы
  
  // Ваш код для выполнения при отправке формы
}

[Егор]

Всё равно не понимаю. Если мне не надо отправлять форму, то мне надо сделать другое действие. Зачем тогда предотвращать отправку, если дальше идёт мой код? И в чём разница между нажатием на кнопку и enter?

[Henxed]

Егор, в таком случае Вам наверное нужно что-то типа такого?

[Егор]

Henxed, да, спасибо большое!