Атрибут required тега <textarea> — обов'язкове поле

<form>
  <p>З використанням атрибута required</p>
  <p>Напишіть своє повідомлення:</p>
		 <p><textarea name="comment" placeholder="Повідомлення" required></textarea></p>
		<button type = "submit">Надіслати</button>
	</form>
<br>
<form>
  <p>Без використання атрибута required</p>
  <p>Напишіть своє повідомлення:</p>
		<p><textarea name="comment" placeholder="Повідомлення"></textarea></p>
		<button type = "submit">Надіслати</button>
	</form>

HTML

<form>
    <p class="row">
        <label for="a">1. Порожнє поле з required</label>
        <textarea id="a" required></textarea>
        <span class="why">Порожній рядок — значення відсутнє. Форма не піде.</span>
    </p>

    <p class="row">
        <label for="b">2. Те саме поле, але всередині один пробіл</label>
        <textarea id="b" required> </textarea>
        <span class="why">Виглядає порожнім, а вважається заповненим: пробіли
            ніхто не обрізає. Саме тому required не рятує від «порожнього» тексту.</span>
    </p>

    <p class="row">
        <label for="c">3. required разом із readonly</label>
        <textarea id="c" required readonly></textarea>
        <span class="why">Виведене з перевірки повністю: порожнє, а форма
            вважає його правильним. Рамка лишилася сірою невипадково — таке
            поле не збігається ні з :valid, ні з :invalid.</span>
    </p>

    <p class="row">
        <label for="d">4. Початковий текст просто в розмітці</label>
        <textarea id="d" required>Уже заповнено</textarea>
        <span class="why">Усе між теґами — це вже значення, вимога виконана
            з першої секунди.</span>
    </p>

    <p class="row polite">
        <label for="e">5. Ввічливе оформлення</label>
        <textarea id="e" required placeholder="Розкажіть, що сталося"></textarea>
        <span class="why">Червоного немає, доки поле не чіпали: правило
            :invalid тут скасовано, а червону рамку дає :user-invalid — він
            спрацьовує лише після того, як у полі побували. Напишіть щось
            і зітріть — рамка почервоніє.</span>
    </p>
</form>

CSS

.row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 4px 14px;
    align-items: start;
    max-width: 720px;
    margin: 0 0 20px;
}

label {
    grid-column: 1;
    font-weight: 600;
}

textarea {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 320px;
    height: 60px;
    padding: 6px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

.why {
    grid-column: 2;
    grid-row: 2;
    max-width: 420px;
    color: #5a6472;
    font-size: .9em;
}

textarea:invalid {
    border-color: #d64545;
    background: #fff4f4;
}

textarea:valid {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

.polite textarea:invalid {
    border-color: #b9c6d8;
    background: #fff;
}

.polite textarea:user-invalid {
    border-color: #d64545;
    background: #fff4f4;
}

.polite textarea:valid {
    border-color: #3a9a4f;
    background: #f3fbf4;
}