Нужен следующий скрипт для формы:
- В обычном состоянии рамки полей серые, кнопка «Отправить» с атрибутом disabled.
- Когда поле в фокусе, но еще пустое, рамка красная. Кнопка «Отправить» по-прежнему disabled.
- Когда происходит правильный ввод информации (об этом ниже), рамка становится зеленой. Кнопка «Отправить» по-прежнему disabled.
- Когда все поля заполнены правильно, у всех полей рамка зеленая, а кнопка «Отправить» становится активной (атрибут disabled убирается).
Поля следующие:
- Имя (name) — считается валидным если введено от двух до 100 символов. Только буквенные A-Z, a-z, А-Я, а-я и дефис.
- Эл. почта (email) — считается валидным после ввода хотя бы одного символа и знака @ (*@ ). Разрешенные символы A-Z, a-z, 0-9, -, _ и точка.
- Телефон (phone) — считается валидным, если правильно введен номер телефона по маске (об этом ниже).
- Сообщение (message) — считается валидным, если введен хотя бы один любой символ.
Валидация должна проходить только, если у поля установлен атрибут required. Если этого атрибута НЕТ, то поле можно оставить пустым (рамка серая), либо писать в нем все, что угодно (при фокусе рамка сразу становится зеленой).
Теперь о сторонних скриптах. Для отображения маски телефона используется
Masked input plugin. Соответственно, валидность введенного телефона определяется исходя из маски. Например: +7 (___) ___-__-__.
И еще один сторонний скрипт, который будет подключен к кнопке «Отправить»,
SweetAlert. При нажатии на активную кнопку «Отправить», выдает всплывающее окошко с сообщением об удачной отправке.
Сторонние скрипты подключать к форме не обязательно — я могу сделать это сам. Главное, чтобы написанный скрипт учитывал их присутствие и не конфликтовал с ними.
Привязку скрипта к форме лучше делать через классы, а не через ID, потому что форм на странице может быть несколько.
На Яндексе есть 400 руб. (готов обсуждать).