Блог

Главная - Вопросы по программированию - Использование JavaScript для проверки пользовательского ввода

Использование JavaScript для проверки пользовательского ввода

#javascript #html

#javascript #HTML

Вопрос:

Я отправляю форму с вводимым текстом на свой сервер через свой веб-клиент. Что я пытаюсь сделать, так это проверить, передал ли пользователь текст в поле ввода перед отправкой формы, нажав кнопку отправки.

Что я пробовал до сих пор:

 var form = document.getElementById("id");

document.getElementById("id").addEventListener("click", function() {
  var input = document.getElementById("content").value;
  if (input == "") {
    alert("write something in the textfield");
  } else {
    form.submit();
  }
});  
 <form action="" method="post" id="id">
  <input type="text" name="name" id="content">
  <button type="submit" id="submit-id">submit text</button>
</form>

Есть хорошие советы о том, как это сделать?

Ответ №1:

Вы хотите предотвратить дефолт в событии отправки

 document.getElementById("id").addEventListener("submit", function(e) {
  const input = document.getElementById("content").value;
  if (input.trim() === "") {
    alert("write something in the textfield");
    e.preventDefault()
  }
});  
 <form action="" method="post" id="id">
  <input type="text" name="name" id="content">
  <button type="submit" id="submit-id">submit text</button>
</form>

В качестве альтернативы просто добавьте обязательный атрибут — скрипт не нужен:

 <form action="" method="post" id="id">
  <input type="text" name="name" id="content" required>
  <button type="submit" id="submit-id">submit text</button>
</form>

Ответ №2:

вместо этого вы можете использовать простой фрагмент кода :

     <form action="" method="post" id="id">
      <input type="text" name="name" id="content" required>
      <button type="submit" id="submit-id">submit text</button>
    </form>

Ответ №3:

 function submitIt(e) {
  var formData = new FormData(e);
  var object = {};
  formData.forEach(function(value, key) {
    object[key] = value;
  });
  if (object.name == "") {
    alert("null");
  } else {
    alert("ok");
    return true;
  }
  return false;
}  
 <form onsubmit="return submitIt(this)">
  <input type="text" name="name">
  <button>submit text</button>
</form>

Комментарии:

1. Код все равно будет отправлен