JS Мера слова и принять меры

Question

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

Answer 1

Есть много способов достижения этого, в том числе:

1- Добавление атрибута pattern к элементу input:

<form>
  <input type="text" pattern=".{2,}">
  <input type="submit" value="Submit">
</form>

В этом случае, если ввод неверен, форма не будет отправлена ​​и отобразит сообщение об ошибке браузера по умолчанию.

Регулярное выражение .{2,} соответствует всем строкам длиной 2 или более.

2 - Проверка длины входного значения с помощью Javascript и принятие соответствующих мер:

function validate() {
  var text = document.getElementById("input").value;
  if(text.length < 2) {
    //display an alert or whatever
    console.log("invalid");
    return false; //form will not submit
  }
  return true; //form will submit
}

<form onsubmit = "return validate();">
  <input type="text" id="input">
  <input type="submit" value="Submit">
</form>

Используя этот метод, после нажатия кнопки submit формы будет выполняться функция validate(). Если функция возвращает true, форма будет отправлена. Если возвращается false, форма не будет отправлена.

Способ 1 быстрее, а способ 2 более настраиваемый / гибкий.

Answer 2

Еще один простой способ:
HTML:

    <form id="form1">
        <input id="input2" type="text" placeholder="your text here"></input>
        <button type="submit">submit</button>
    </form>

JS:

 $('#form1').submit(function(event){
        if($('#input2').val().length < 2){
            event.preventDefault();
            alert('ur input text will be more than 1 character');
        }
    });

Не забудьте импортироватьБиблиотека jQuery перед кодом:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

Answer 3

В кнопке отправки внутри формы рассмотрите возможность сделать следующее:

<button onclick="checkValidity()">Submit</button>

А внутри тегов <script> внутри тела html добавьте следующий код:

function checkValidity(){
     var val = document.getElementById('inputfield').value; //I'm assuming the id of the input text field to be inputfield
    if(val.length<2) window.alert('too short');

}