Проверка введенного текста в форме html

Question

Есть форма

<input class="field" id="number" name="card_number" placeholder="0000 0000 0000 0000"
                                   required="" type="text" value="" maxlength="22">

Так же есть функция, которая вернет булевое значение. Как сделать так, чтобы при вводе значения, вызывалась функция, и если она фернет false, то при нажатии кнопки, сайт просил заполнить форму правильно?

Answer 1

Не понял насчёт обязательного условия с функцией, но в общем я бы делал как-то так. Проверяем ввод, если ничего не коряво, то сабмитим форму (или что там надо), иначе алертим каким-то образом, что что-то не так.

const input = document.getElementById('number');
const submit = document.getElementById('submit');

function validate(event) {
  event.preventDefault();
  if(input.value !== '1111 1111 1111 1111') { // или какие тут должны быть условия
    console.log('enter correct number');
    return;
  } else {
    console.log('submitted');
    // form.submit(); если нужно сабмитить форму
  }
}

submit.addEventListener('click', validate);

<input class="field" id="number" name="card_number" placeholder="0000 0000 0000 0000"
                                   required="" type="text" value="" maxlength="22">
  <button type="submit" id="submit">confirm</button>

БЛОГ НА HUSL

Проверка введенного текста в форме html

Ответы (1 шт):