Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Поля, обязательные для заполнения, сразу подсветятся нам как: Такое поведение можно исправить, изменяя показываемые валидатором сообщения. Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Показываем все ошибки для всех полей. Курсы Программа обучения Все курсы HTML Шорты Подписка. Интенсивы Все интенсивы Получить профессию База выпускников Для компаний. Информация Об Академии Для наставников Для школ. Остальное Написать нам Блог Форум.
Вам когда-нибудь приходилось искать скрипты и плагины для валидации произвольных форм и контейнеров? Когда тэг "form" не используемая конструкция? И когда необходимо проверять корректность полей в любое время, а не по зашитым концептуальным механизмам? Можно долго спорить о необходимости соблюдать стандартны и поддерживать отправку данных через полную перезагрузку страницы. Тем не менее, сегодня, большинство web-приложений уже не возможно представить без поддержки javascript-a. Отключите javascript - и сервисы станут бесполезными, несмотря на то, что вы сможете зарегистрироваться, войти и пройтись по нескольким страницам. Речь идет о том, что тег form предназначен для отправки данных методом POST и требует перезагрузки страницы или фрейма. Тем не менее, чем дальше, тем реже используется этот метод, и тем чаще те же самые данные отправляются ajax-ом, которому в общем все равно, какие теги использовались перед формированием данных. Конечно, существуют интернет-гиганты, которым в обязательном порядке необходимо поддерживать разные способы и режимы. Но, в их случае даже самый маленький процент подразумевает миллионы пользователей. Название плагинов умышленно не приводится в статье, так как задачей является не критика конкретных приложений, а создание простого инструмента, который можно применить к произвольным формам. Большинство существующих скриптов для валидации форм имеют несколько серьезных ограничений, которые далеко не всегда можно обойти простыми заглушкам или которые потребуют от вас длительной рутины. С одной стороны, вполне логично, что привязка идет к тегу форм, так как плагины появились "после". С другой стороны, сегодня скрипты позволяют быстро создавать и собирать данные из любых произвольных форм. При определенном уровне любопытства и настойчивости, вы можете легко создать форму только на тэгах "span" div и "input", при этом выглядеть она будет точно так же, как и все другие. Разумеется, большинство плагинов имеют много приятных моментов. Но, по большому счету, они сводятся к:. Если раньше красивая анимация и навороченный механизм сами по себе были достаточно вескими аргументами в пользу использования того или иного плагина, то сегодня это уже не совсем так. Найти готовые регулярные выражения для проверок большинства известных типов полей - задача не очень сложная. Большое число разнотипных проверок уже не столь актуально, как раньше. Стремление к минимализму форм ведет к уменьшению количества проверок. Попробуйте вспомнить, когда вы в последний раз встречали проверки, которые бы отличались от валидации текста, исключая повторение пароля? Необходимость в создании собственных валидаторов, при обилии уже готовых регулярных выражений, встречается все реже и реже. Красивая анимация и всплывающие подсказки в окошках когда-то будоражили фантазию и придавали приложениям очарование и неповторимость. Тем не менее, сегодня, достаточно пометить красным цветом хорошо известные всем поля, и большинство пользователей сами поймут, что именно необходимо исправить. Не стоит считать, что плагины не имеют смысла и что их не стоит использовать. Существует достаточно много ситуаций, когда написание кода с нуля обойдется намного дороже, чем использование готовых плагинов. В данной статье речь идет о тех ситуациях, когда ограничения плагинов либо создают препятствия, либо их плюсы не сильно превышают затраты по времени и силам. Вам совершенно не обязательно писать приложение с нуля, пример с готовым скриптом и стилями можно скачать по ссылке в конце статьи. Прежде, чем реализовывать свой механизм, необходимо определиться с его возможностями и ограничениями:. И первым делом, переходим к самому важному, к определению основного механизма - вызова проверок для полей. Ведь, выбранный алгоритм будет напрямую влиять не только на сложность настройки, но и на количество букв, которое вам придется набирать, чтобы его корректно запустить. Исходя из составленных требований, самым простым механизмом будет вызов валидаторов по наличию классов стилей в атрибуте "class". Во-первых, стили легко задаются и не накладывают серьезных ограничений. Во-вторых, их можно добавлять и убирать в любой момент. В-третьих, если какие-то классы стилей вы уже используете в своем проекте, то их переименование, как в скрипте валидации, так и в полях, решается простой заменой одной строки на другую, без кардинального изменения кода. К сожалению, даже обилие javascript проверок и обработчиков событий не уберегут ни одно приложение от необходимости валидации данных на серверной стороне. Помните, что можно без особых усилий составить и вызвать отправку данных практически на любом браузере. При составлении структуры тестового проекта, старайтесь максимально приблизить ее к структуре настоящего проекта. Это поможет вам отловить проблемы, связанные со структурой, еще на этапе разработке. Большую часть файла стилей занимают стили самой формы, что бы демонстрационный пример выглядел привлекательно. Для самого же плагина нужны только первые два правила ". Старайтесь добавлять даже к тестовым формам хотя бы минимальны дизайн. Чем ближе тестовый проект будет к реальному, тем больше шансов отловить ошибки и скрытые проблемы. Например, картинка в "background" для проверенных полей будет занимать часть поля. Это означает, что для полей с большим объемом текста необходимо предусматривать отступы в стилях. Так как скрипт достаточно простой и в самих комментариях подробно описана вся необходимая информация, то файл приводится целиком:. Может быть селектором или элементом container: Тестовая страница достаточно проста. Ее основное пространство занимает html-код самих форм демонстрационного примера. Сам же вызов плагина для создания валидации на лету, а так же запуск ручной валидации по нажатию на кнопку, занимают всего несколько строк. Теперь, сохраняем все файлы в проекте, открываем index. Как видно, на экране будут отображаться две формы. Форма следа будет проверяться на валидацию в режиме реального времени, то есть при каждом вводе в текстовые поля, а так же при нажатии на кнопку "отправить форму". Форма справа будет проверяться вручную, только при нажатии на кнопку "Отправить форму". В остальное время форма останется нетронутой. Теперь, убедимся, что валидация происходит в те моменты, когда это необходимо, и что формы никак не влияют друг на друга. Выглядеть это будет примерно так:. Как видно, в форма слева проводилась валидация на лету. А в форме слева валидация происходила только по нажатию на кнопку "Отправить форму. Закончив, первичное тестирование, необходимо снова пройтись по возможностям и ограничениям составленным в самом начале:. Теперь, у вас есть легкий и простой плагин на jQuery, который можно применять для валидации произвольных форм как на лету, так и в ручном режиме. При этом, плагин легко расширяется как с точки зрения количества проверок, так и с точки зрения дополнительной функциональности. Подписаться на уведомления о новых комментариях. Введите защитный код Обновить. Логин Пароль Запомнить меня Забыли пароль? Мир бесплатных программ и полезных обзоров Скачать бесплатно программы и найти решения своих проблем. Домой Обзоры Разработка Старт Безопасность Оптимизация Мультимедиа Офис Интернет и Сеть Система Программы Разработка Код Статьи Советы Браузер Социальные сети Что делать ошибки и проблемы Что такое Инструменты Почему. Спасибо за великолепную статью. Как можно прикрутить сообщение об ошибке которое показывается над или под полем ввода? Я так понял, надо как-то прикрутить инфу из статьи "Как сделать всплывающие окна на jQuery информеры? К сожалению в кодах я не силён Во, хотя бы ка у Вас на сайте в этой форме! Всплывающие окна на jQuery - это не то, что нужно. Вам нужно смотреть в сторону tooltip всплывающие подсказки. И, к сожалению, если вы не очень сильны в кодах, то будет не так просто. Тем не менее, tooltip можно добавить в функцию validItem. Достаточно проверять результат validResult перед отправкой. Жаль нет возможности скиншот прицепить. Эту форму в которой пишу сами написали? Есть статья как её сделать? Или напишите как сделать скрипт внизу этого поля "осталось столько-то символов". Эта форма для отправки основана на модуле jComments. Она у меня заглючила, потом "выздоровела", и после этого всё стало работать! Минимальное может быть равно 0. Не хотите проапдейтить скрипт? Пишется данная функция за 5 минут. Кстати, в русском языке достаточно много хороших слов. Например, расширить, добавить, увеличить и так далее: Если такая доработка делается за пять минут - это очень впечатляет. Так сложилось, что php и javascript - это не то, чем я занимаюсь, и даже не хобби, просто мне нужно немного в них разбираться, чтобы иногда что-то улучшить. Что касается слов - да, я знаю, в русском языке много подходящих слов, но русский для меня - иностранный, и я могу употребить такие слова, как проапдейтить просто потому, что корень этого слова мне ближе, и еще - так говорят, я точно это слышал. Хоть это и не чисто по-русски, как я понимаю. Но вот слово скрипт - оно тоже вряд ли русское, не так ли? И валидация тоже, мне кажется. Еще в транспорте я слышал по-русски такое: Даже не знаю, как это правильнее сказать, но и так вроде все ясно. Купил билет, теперь нужно сделать валидацию. Позволю себе вопрос по существу. Дело в том, что я хотел после валидации формы сделать ее отправку с использованием ajax. Для этого взял где-то такую функцию: Возможно, я не прав, или call нужно делать из другого места - был бы признателен за рекомендации. Либо, если это не слишком обременительно для Вас, возможно, Вы могли бы дополнить Ваш пример отправкой формы после успешной валидации с использованием ajax. Но для меня было бы более чем достаточно рекомендации, откуда именно лучше вызывать call. Проблема в функции serialize, которая применима только для тегов "form". В случае данного js-скрита, показывается валидация для произвольно составленных форм в данном примере это был div , соответственно, serialize использовать нельзя. Вместо нее используйте функцию по типу следующей: Для select, чекбоксов и радиобаттонов, функцию нужно доделать. И проверка диапазона длины, и отправка массива вместо serialize работают прекрасно. В целом, все прекрасно, но хотелось бы внести еще два улучшения. После успешной отправки все данные в форме хорошо бы стереть, чтобы юзеру было спокойнее. И после этого хорошо бы выдать сообщение об успешной отправке. Например, в пределах div с формой добавим div с текстом: Текст до отправки формы и после отправки формы он должен поменяться. У меня это здесь: Если Вас не затруднит подсказать, как это решить, буду Вам весьма признателен. Если надумаете доделать функцию для select, чекбоксов и радиобаттонов - это будет вообще предел мечтаний. Спасибо еще раз, и успехов Вам. Насчет функции для select, checkbox и radiobutton. Эта задача не совсем относится к скрипту. Поясню о чем речь. Обычно, валидация накладывается на уже существующие механизмы отправки данных, ну или в крайнем случае делается совместно со сбором данных. Тем не менее, в зависимости от того, как сделаны формы сбор информации, очистка и прочее могут быть жутко специфичны. Так, к примеру, если речь идет о стандартной отправке данных через post, то валидация и не должна ничего собирать, так как все данные идут в теге form. Если же речь идет об ajax отправке данных, то тут есть, как минимум, несколько моментов. Во-первых, сами формы могут динамически формироваться например, зависимые списки с подгрузкой или же просто полностью html-формы и под них уникальный скрипт - это уже целая библиотека. Во-вторых, события в виде очистки - это локальная задача отдельного проекта. Кто-то будет чистить часть полей, кто-то все, а кто-то оставит как есть. В-третьих, сегодня существует немало готовых элементов управления красивые кнопки и т. Соответственно, их очистка ни к чему не приведет, а только лишь нарушит логику скриптов красивых кнопок, списков и прочего. Поэтому, такие функции обычно пишутся под конкретные задачи, а скрипт валидации рассчитан для использования как "универсальную" и "легко добавляемую" функциональность. Обновить список комментариев RSS лента комментариев этой записи. Комментарий - это вежливое и наполненное смыслом сообщение правила. О нас О проекте Контакты. Инфо Правила Карта сайта. Портал Мир бесплатных программ - полезные и интересные обзоры, статьи, советы по компьютеру и бесплатные программы для Windows, Linux и Mac. Часть материалов была взята и переведена с сайта Gizmo Убедительная просьба, при копировании материалов с http:
https://gist.github.com/328683ef2110db5b4749b02441832e78
https://gist.github.com/8102e73f188b7e986d1a49dca241d9b2
https://gist.github.com/083e05ee347ee36c62903c429bec18f3