Как исключить отправку пустой строки и сделать подсчёт оставшихся для ввода знаков в поле input?

265

28 мая 2018, 18:50

Есть такая форма:

<form>
<p>Введите телефон :</p>
<p><input type="tel" pattern="[0-9]{12}"></p>
<p><input type="submit" value="Отправить"></p>

Работает корректно, кроме случая, когда отправляешь пустую строку. Подскажите пожалуйста, что нужно сделать, чтобы учитывалась и пустая строка?

Можно ли сделать так, чтобы пользователь видел сколько символов осталось вбить?

Answer 1

Атрибут required устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, обозреватель сети выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от обозревателя сети и меняться пользователем не может.

Подсчёт оставшихся цифр только через JavaScript:

document.querySelector('#tel').onkeyup = function(e) { 
  var length = 12; 
  document.querySelector('#output').innerHTML = 'Осталось ввести ' + (length - this.value.length) + ' цифр.'; 
}

<form> 
  <p>Введите телефон:</p> 
  <p><input type="tel" id="tel" maxlength="12" placeholder="007908123456" pattern="[0-9]{12}" required> 
    <br><span id="output"></span></p> 
  <p><input type="submit" value="Отправить"></p> 
</form>