Как сделать, чтобы форма не отправлялась при условии что символов недостаточно?

Question

[dsoloma34]

Нужно, чтобы форма не отправлялась, если в input type="tel" меньше 15 символов.

Вот что есть:

<input type="tel" placeholder="[phone]" id="phone" name="phone" data-field="item" required>
 <input id="but1" value="Zamówic" type="submit">

$(function () {
   var inputName = $('[data-field="input-name"]');
   $(document).on('input', '[data-field="item"]', function () {
		var item = $(this);
		
		$('#but1').on('click', function() {
				if (item.val().length < 15) {
					alert('< 15 символов');
				}
		});
	});
});

Answer 1

[Андрей Пастухов]

$('#but1').on('click', function(event) {
  if (item.val().length < 15) {
    alert('< 15 символов');
    event.preventDefault();
    // event.stopPropagation(); <-- еще можно остановить клик, но так не советуется делать
  }
});

Comments

[dsoloma34]

Привет! Подскажи пожалуйста почему вылезает 5 alert окон?

[Андрей Пастухов]

Вынеси кострукцию $('#but1').on('click', function(event) { за пределы $(document).on('input', '[data-field="item"]',

[dsoloma34]

tyllo, Тогда нет проверки на количество символов

[Андрей Пастухов]

Удали вообще свой блок с $(document).on('input', '[data-field="item"]' и оставь только

$('#but1').on('click', function(event) {
  const $input = $('input[data-field="item"]');

  if ($input.val().length < 15) {
    alert('< 15 символов');
    event.preventDefault();
    // event.stopPropagation(); <-- еще можно остановить клик, но так не советуется делать
  }
});

Answer 2

[Дмитрий Павлюк]

Добрый день!

Как-то так:

HTML

<input type="tel" placeholder="[phone]" id="phone" name="phone" data-field="item" minlength="9" required>
<input id="but1" value="Zamówic" type="submit">

JS

phone.addEventListener('keyup', function(evt){
  let length = this.value.length
  if (length < 9) document.getElementById('but1').disabled = true;
  else if (length == 9) document.getElementById('but1').disabled = false;
  else if (length > 9) document.getElementById('but1').disabled = true;
})

https://jsfiddle.net/pavlukd/opvnemr5/