Ответ
Валидная форма — это форма, все данные которой проходят проверку (валидацию) по заданным правилам на стороне клиента (браузер) и/или сервера.
Невалидная форма — это форма, содержащая хотя бы одно поле с данными, не соответствующими правилам валидации.
Правила валидации могут включать:
- Заполненность обязательных полей (атрибут
required). - Соответствие формату (email, телефон, URL через
type="email"илиpattern). - Длину данных (
minlength,maxlength). - Диапазон значений для чисел (
min,max).
Пример HTML-формы с встроенной валидацией:
<form>
<label for="email">Email*:</label>
<input type="email" id="email" name="email" required>
<label for="password">Пароль (6-20 символов)*:</label>
<input type="password" id="password" name="password"
required minlength="6" maxlength="20">
<label for="age">Возраст:</label>
<input type="number" id="age" name="age" min="18" max="120">
<button type="submit">Отправить</button>
</form>Ключевые отличия:
- Отправка: Валидную форму браузер отправит на сервер. Невалидную — заблокирует, показав ошибку.
- Безопасность: Клиентская валидация — для удобства пользователя (UX). Серверная валидация обязательна для безопасности и целостности данных, так как клиентские проверки можно обойти.
- Состояние: Поле формы может быть в состояниях
:validи:invalid, что позволяет стилизовать их по-разному с помощью CSS.
Ответ 18+ 🔞
А, ну вот, опять про эти ваши формы, блядь. Слушай, сейчас разложу как есть, чтобы даже мартышлюшка поняла.
Представь, что форма — это такой ебучий пропускной пункт. Валидная форма — это когда ты подходишь, у тебя все документы в порядке, морда чистая, и тебя с улыбочкой пропускают дальше, на сервер, значит. Всё прошло, хуй с горы.
А невалидная форма — это когда ты лезешь на этот пункт, а у тебя, сука, в паспорте фотка с рожей пьяного енота, или поле для имени пустое, а оно обязательное. Тебя, естественно, посылают нахуй сразу, даже не чихнув. "Иди, — говорят, — исправляй, мудак".
А правила, по которым тебя проверяют, это вообще отдельная песня, ёпта:
required— это как "предъяви документ, блядь". Нет документа — нихуя не пройдёшь. Обязательное поле.type="email"— ну тут ясно, почта. Если ты в это поле впишешь "йцукен@блабла", тебе браузер так ебальник скривит, мол, "ты че, долбоёб, это не почта".minlength,maxlength— длина. "Пароль от шести символов, не меньше!" — кричат тебе. А ты ввёл "123". Ну и где твои шесть, а? Невалидно, нахуй.min,maxдля чисел — возраст, например. "Вам есть 18?" — спрашивают. А ты пишешь "5". Да ты че, бля, в детский сад иди, а не форму отправляй!
Вот, смотри, живой пример, как это в коде выглядит, чтоб ты понимал масштаб:
<form>
<label for="email">Email*:</label>
<input type="email" id="email" name="email" required>
<label for="password">Пароль (6-20 символов)*:</label>
<input type="password" id="password" name="password"
required minlength="6" maxlength="20">
<label for="age">Возраст:</label>
<input type="number" id="age" name="age" min="18" max="120">
<button type="submit">Отправить</button>
</form>А теперь главное, что ты должен вынести из этого всего, чтобы не быть пидарасом шерстяным:
- Отправка. Валидную — отпустят с миром. Невалидную — заблокируют нахуй, будут тыкать мордой в красные подсказки, пока не исправишь.
- Безопасность — это пиздец как важно. Вся эта клиентская валидация с красивыми сообщениями — это просто для твоего удобства, чтобы ты не ждал ответа от сервера. Но любой мало-мальски хитрожопый пользователь может её отключить в инструментах разработчика и послать на сервер что угодно: "возраст: -999". Поэтому на сервере проверять ВСЁ ОБЯЗАТЕЛЬНО. Иначе прощайся с базой данных, она накроется медным тазом.
- Состояние. Браузер сам помечает поля: валидные (
:valid) и невалидные (:invalid). И их можно по-разному раскрасить, чтобы сразу было видно — ага, тут че-то не так, тут пользователь мудак.
Вот и вся философия. Сделал всё по правилам — молодца, пошёл дальше. Накосячил — сиди, исправляй, пока не надоест.