Как валидировать форму textarea на стороне пользователя?

Question

Как валидировать форму textarea на стороне пользователя?

Рейтинг: 0Ответов: 1Опубликовано: 23.04.2023

Есть блок с автоматическим масштабированием по вертикали при переходе на следующую строку. В моей форме пользователь может написать много пробелов и много переносов на следующую строку без ограничений. Как можно сделать проверку, чтобы пользователь не мог написать более двух символов: " ", "/n" (или есть какое-то более правильное решение). Проект Spring - Java - JS.

Я использовал регулярное выражение для исправления строки, но в этом случае поле можно было бы оставить пустым и попасть в базу данных (Условный пользовательский комментарий был бы бесполезен для других и не содержал бы ничего).

java spring

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Вы можете валидировать форму со стороны сервера:

Вы можете реализовать валидацию в формах с помощью Java Standart Bean Validation API. Реализацию можете выбрать любую. Я пользовался только Hibernate Validator. Там можете использовать либо аннотацию @NotEmpty - она не позволит пользователю заполнить форму исключительно пробелами либо оставить форму пустой. Либо вообще написать собственную аннотацию, и в ней реализовать абсолютно любую логику проверки входных данных.

Также вы можете валидировать форму со стороны клиента. Тогда вам потребуется JavaScript. В нем я не особо силен, поэтому не исключена неточнось но выглядит это примерно так:

<form>
  <label for="textarea">Textarea:</label>
  <textarea id="textarea" name="textarea"></textarea>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.querySelector('form');
  const textarea = form.elements.textarea;

  form.addEventListener('submit', (event) => {
    
    event.preventDefault();

    // присваиваем value то, что введено пользователем в форму:
    const value = textarea.value;

    // Проверка чтобы поле не было пустое
    if (!value.trim()) {
      alert('Error!');
      return;
    }

    //Проверка не более двух переносов строки:
    if (/\n.*\n.*\n/.test(value)) {
      alert('Error!');
      return;
    }

    //Дальше можете добавить сколько угодно if и проверять что вас еще 
    //интересует

    // Если все if успешны:
    form.submit();
  });
</script>

Как валидировать форму textarea на стороне пользователя?

Ответы