Как выполнить проверку формы с помощью JavaScript?

Question

[Александр]

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

Answer 1

[Adamos]

Повесить на onsubmit этой формы функцию, проверяющую значения полей и возвращающую false, если что-то не так.
Но это чисто декоративное решение, которым можно разве что помогать пользователям заполнить форму правильно. На отправку ботами данных на тот скрипт, который у вас принимает результаты этой формы, вы этим кодом никак не подействуете.

Comments

[Александр]

Да, я знаю, что нужно также осуществлять проверку и на стороне сервера, но хотел знать также способ сделать это и на клиентской стороне.

[Adamos]

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

[Александр]

Adamos, а знать основные механизмы значит не нужно? Библиотека ведь не даст никаких знаний того, как писать что-то подобное.

[Adamos]

Александр, все сокровенное знание я вам уже дал: если onsubmit возвращает false, форма не отправляется.
Продвинутый уровень - не отправлять ее вообще никогда, собирать скриптом данные и отправлять их ajax. Это, кстати, не только позволит сделать продвинутую обработку на сервере (например, на клиенте вы не можете достоверно проверить уникальность логина при регистрации), но и позволит клиенту продолжить работать с заполненной формой в случае такой ошибки.
Однако написание велосипедов на эту тему хоть и увлекательно, но в целом бесполезно. Именно из-за того, что готовых удачных решений на любой вкус - пруд пруди.

Answer 2

[damn]

Достаточно надёжно?
if (value.length < 10 || !value) return;

Если вам нужно проверить все поля на одно и тоже условие:

const inputs = [...];
const allSuccess = inputs.map(input => {
    if (value.length < 10 || !value) return;
    
    return true;
}).every(bool => bool === true)

Comments

[Александр]

Я имею в виду, какие есть способы отменить действие кнопки "submit", если поля формы содержат не те данные. Знаю, что есть атрибут "onsubmit". Это единственный способ?