Ошибка при валидации данных

Просмотров 1.2к. Опубликовано 19.12.2022
Обновлено 19.12.2022

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

Ошибка валидации, что это такое?

Для написания страниц используется HTML – стандартизированный язык разметки, применяемый в веб-разработке. HTML, как любой другой язык, имеет специфические особенности синтаксиса, грамматики и т. д. Если во время написания кода правила не учитываются, то после запуска сайта будут появляться различные виды проблем. Если HTML-код ресурса не соответствует стандарту W3C, то он является невалидным, о чем мы писали выше.

Почему ошибки валидации сайта оказывают влияние на ранжирование, восприятие?

Наличие погрешностей в коде – проблема, с которой необходимо бороться сразу после обнаружения. Поисковые системы «читают» HTML-код, если он некорректный, то процесс индексации и ранжирования может быть затруднен. Поисковые роботы должны понимать, каким является ресурс, что он предлагает, какие запросы использует. Особо критичны такие ситуации для ресурсов, имеющих большое количество веб-страниц.

Как проверить ошибки валидации?

Для этой работы используется либо технический аудит сайта, либо валидаторы, которые ищут проблемы автоматически. Одним из самых популярных является сервис The W3C Markup Validation Service, выполняющий сканирование с оглядкой на World Wide Web Consortium (W3C). Рассматриваемый валидатор предлагает три способа, с помощью которых можно осуществить проверку сайта:

• ввод URL-адреса страниц, которые необходимо просканировать;
• загрузка файла страницы;
• ввод части HTML-кода, нуждающегося в проверке.

После завершения проверки вы получите развернутый список выявленных проблем, дополненных описанием, ссылками на стандарты W3C. По ходу анализа вы увидите слабые места со ссылками на правила, что позволит самостоятельно исправить проблему.

Существуют другие сервисы, позволяющие выполнить проверку валидности кода:

• Dr. Watson. Проверяет скорость загрузки страниц, орфографию, ссылки, а также исходный код;
• InternetSupervision.com. Отслеживает производительность сайта, проверяет доступность HTML.

Плагины для браузеров, которые помогут найти ошибки в коде

Решить рассматриваемую задачу можно с помощью плагинов, адаптированных под конкретный браузер. Можно использовать следующие инструменты (бесплатные):

• HTML Validator для браузера Firefox;
• HTML Validator for Chrome;
• Validate HTML для Firefox.

После проверки нужно решить, будете ли вы устранять выявленные ошибки. Многие эксперты акцентируют внимание на том, что поисковые системы сегодня уделяют больше внимания качеству внешней/внутренней оптимизации, контенту, другим характеристикам. Однако валидность нельзя оставлять без внимания, ведь если даже обнаруженные проблемы не будут мешать поисковым ботам, то они точно начнут раздражать посетителей сайта.

Как исправить ошибку валидации?

В первую очередь нужно сосредоточить внимание на слабых местах, связанных с контентом – это то, что важно для поисковых систем. Если во время сканирования было выявлено более 25 проблем, то их нельзя игнорировать из-за ряда причин:

• частичная индексация;
• медленная загрузка;
• баги, возникающие во время непосредственной коммуникации пользователя с ресурсом.

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

Технический и SEO-аудит

Выявление ошибок – первый шаг, ведь их еще нужно будет устранить. При наличии большого пула проблем целесообразно заказать профессиональный аудит сайта. Он поможет найти разные виды ошибок, повысит привлекательность ресурса для поисковых ботов, обычных пользователей: скорость загрузки страниц, верстка, переспам, другое.

В заключение

На всех сайтах наблюдаются ошибки валидации – их невозможно искоренить полностью, но и оставлять без внимания не стоит. Например, если провести проверку сайтов Google или «Яндекс», то можно увидеть ошибки, однако это не означает, что стоит вздохнуть спокойно и закрыть глаза на происходящее. Владелец сайта должен ставить во главу угла комплексное развитие, при таком подходе ресурс будет наполняться, обновляться и «лечиться» своевременно. Если проблем мало, то можно попробовать устранить их своими силами или с помощью привлечения стороннего частного специалиста. В остальных случаях лучше заказать услугу у проверенного подрядчика.

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

Валидация сайта

Но есть и другие факторы, которые могут и влияют на позиции сайта. И к ним относятся, в том числе, и технические факторы. Ну а к техническим относятся и валидация сайта. Так что же это такое?

Если простыми словами, то валидация сайта — это проверка кода сайта на техническое соответствие и ошибки. Ну например, вы забыли использовать закрывающий тег — /html.  В последнем HTML5, визуально ничего не поменяется. Однако, это ошибка кода.

При написании кода, возможны и другие ошибки. И опять-таки, современный язык гипер разметки «стерпит» многое. Например, «забытие» закрывающего тега /head. И снова вы не увидите разницу. Но она есть))

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

В чем опасность?

Ну казалось-бы, ну и что тут такого? Да, нужно сказать, что зачастую такие ошибки не видимы. Точнее, невидимы человеком. А ведь страницы нашего сайта могут посетить не только люди, но и поисковые пауки, которые полностью просматривают сайт. И каждую ошибку, которую они находят на сайте, они передают на сервера поисковиков, таких как Яндекс или Гугл.

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

Да, надо признать, определенная пессимизация сайта из-за ошибок валидации, это довольно редкое явление. Но это вполне возможно, а значит, над валидацией обязательно нужно работать. А что для этого нужно сделать? Понятное дело, вначале ошибки нужно найти.

Но поскольку вручную это очень трудоёмкое и ненадежное дело, то для поиска ошибок, используются специальные сервисы, так называемые «Валидаторы».

Валидатор Markup Validation Service.

Этот сервис проверяет правильность кодов HTML и XHTML, которые являются основой большей части страниц при создании практически любого сайта и определяют его внутреннюю структуру. На этот сервис валидатора можно попасть, если пройти по ссылке http://validator.w3.org

Но здесь есть обязательное условие, которое также относится и к другим валидаторам: проверяемый сайт или его проверяемые страницы должны быть закачаны на хостинг. В противном случае, валидатор не будет «знать» адрес сайта и не сможет ничего проверить. Вот сейчас можно уже рассмотреть, как работать на этом валидаторе.

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

Вот именно с него и надо начинать.

Вообще-то, проверка валидации сайта чрезвычайно проста, как и весь наш бренный мир: в адресном окне сервиса надо написать адрес сайта, т.е. его URL и затем нажать «Check». После такого простого действия, валидатор «попыхтит» несколько секунд и выдаст следующее:

Это означает, что никаких ошибок в коде страницы нет и Вы можете быть абсолютно спокойны.

Но также может быть и такой нежелательный вариант:

Это уже похуже и означает, что во внутреннем коде проверяемой страницы есть какие-то ошибки. Однако, это совсем не смертельно: просто надо прокрутить страницу ниже и там подробно будут написаны все найденные ошибки в процессе проверки.

Кроме того, валидатор не только перечислит найденные ошибки, но и точно покажет, на какой строке внутреннего кода эти ошибки расположены. Так что долго их искать не придётся. Здесь, ничего не преувеличивая, можно твёрдо сказать, что этот валидор работает прекрасно.

Но это ещё не всё: валидатор не только указывает местоположение обнаруженной ошибки кода, но и даёт достаточно полные рекомендации, каким образом можно устранить эти ошибки. Конечно, для этого не надо лениться и внимательно прочитать всё написанное.

В качестве краткого и обобщенного вывода, можно сказать следующее:

1. данный сервис валидатора работает прекрасно и может очень быстро провести проверку сайта.
2. Ну и небольшое, но очень приятное дополнение: валидация сайта производиться бесплатно.
3. Сейчас можно перейти к следующему этапу: это проверка кода CSS.

Валидатор CSS Validation Service

В общем это вторая функция вышеописанного сервиса, но она «заточена» не для проверки кода HTML и XHTML, а конкретно для проверки правильности кода стиля CSS, расположенного на внешней таблице. А чтобы попасть на страницу сервиса, надо пройти по ссылке http://jigsaw.w3.org/css-validator.

Кстати, здесь стоит отметить нечто приятное: проверка на этом сервисе абсолютно бесплатна. Так что не надо вытаскивать деньги из своего кошелька — пусть они лежат до нужного момента. Однако перейдём к методике работы на этом втором сервисе.

В общем-то вся работа на валидаторе CSS абсолютно идентична проверке на чистоту кода. Поэтому, приводить отдельную картинку адресной строки валидатора нет необходимости. Просто чуть ниже кратко рассмотрим непосредственно порядок самой проверки и всё.

Для этого надо в адресной строке записать URL таблицы CSS, типа «http://мой сайт/style.css» и после этого нажать кнопку с русской надписью «Проверить». Соответственно, этот валидатор тоже несколько секунд «попыхтит» и выдаст искомый результат:

Это значит, что таблица CSS написана правильно и никаких ошибок в ней не обнаружено.

И здесь также есть приятная неожиданность: если прокрутить страницу несколько ниже, то там будет написан оптимизированный код для Вашей таблицы CSS, из которого убраны все лишние надписи и все теги кода будут расставлены в той последовательности, которая соответствует оптимальным рабочим требованиям всех поисковых систем. Остаётся только скопировать этот идеальный образец кода и вставить его в таблицу CSS.

Вполне может быть, что случиться и такой вариант:

Это значит, что обнаружены какие-то ошибки в коде CSS, но пугаться этого совсем не стоит. Сразу внизу под этой красной строкой, валидатор точно укажет, какой тег написан неправильно. Остаётся только в таблице стиля найти эти теги и сделать нужные исправления.

И конечно, после этого закачать исправленную таблицу стиля на хост и при наличии зелёной строки можно с удовольствием скопировать оптимизированный код стиля таблицы CSS. Вполне понятно, что затем лучше всего поменять старый код на новый и оптимизированный.

Краткое резюме.

Выше были рассмотрены две самых основных и обязательных проверки валидации сайта. Без этих проверок даже не стоит открывать индексацию для поисковых систем в robots.txt В противном случае, сайт может быть проигнорирован для индексации поисковыми машинами и будет считаться неисправным с соответствующими санкциями.

Чтобы этого не произошло, надо затратить всего несколько минут, чтобы быть абсолютно спокойным и полностью уверенным в техническом состоянии своего сайта и всех его страниц. Конечно, необходимо ещё произвести дополнительные проверки ссылок и анкоров, видимости сайта на мобильных устройствах и параметры других кодов. Только тогда сайт можно считать готовым для его полного функционирования и для удачного и быстрого продвижению в ТОП.

Заранее хочется сказать, что все остальные проверки проходят также быстро и просто, как и рассмотренные выше — надо только внимательно прочитать порядок работы с валидатором.

Добавлено 19.04.2018г.

Распространенные ошибки валидности при проверке html кода

Решил дополнить статью ошибками HTML кода, которые часто встречаются на сайтах. Во всяком случае у меня их было много)). Сами ошибки валидатор подсвечивает желтым цветом.

1) Error: Character reference was not terminated by a semicolon.

Ошибка: символ не был прерван точкой с запятой — соответственно надо добавить.

2) Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Предупреждение: Раздел не имеет заголовка. Рассмотрите возможность использования элементов h2-h6 для добавления идентифицирующих заголовков ко всем разделам. Тут все понятно, надо добавить хотя бы один подзаголовок. Это даже не ошибка, а рекомендация.

3) Error: Element noindex not allowed as child of element p in this context.

Ошибка: элемент noindex не разрешен как дочерний элемент элемента p в этом контексте. (Подавление дальнейших ошибок из этого поддерева.)
Решение простое, надо закомментировать тег ноиндекс, вид будет таким:

4) Error: The center element is obsolete.

Ошибка: тег «center» устарел — надо заменить, если речь про img то можно использовать атрибут align. Если что-то другое центрировали, то заменить на div.

5) An img element must have an alt attribute, except under certain

Ошибка: Элемент img должен иметь атрибут alt -тут все понятно, надо добавить атрибут альт, даже если он будет незаполненный, то ошибка уйдет.

6) The width attribute on the td element is obsolete. Use CSS instead.

Ошибка: Атрибут «width» на элементе «td» устарел

7) The type attribute is unnecessary for javascript resources

Ошибка: атрибут type не нужен для ресурсов javascript. Решение просто удаляем все лишнее и оставляем только тег «script».

The align attribute on the img element is obsolete.

Ошибка: Атрибут align для элемента img устарел. Сделайте выравнивание изображений дивами.

Ошибка: Неправильное использование тега «li»: отсутствует тег «ul», «ol» . Нужно проверить вложенность элементов списка.

10) End tag for «div» omitted, but OMITTAG NO was specified

Ошибка: Не хватает закрывающего тега div. Решение — добавляем элемент

11) End tag for element «div» which is not open

Ошибка: закрывающий тег div лишний. Соответственно удаляем.

Жду ваших комментариев, а у вас на сайтах валидный код?

Ошибки валидации – это ошибки в коде страниц сайта, при этом ошибки на главной странице и на внутренних страницах сайта могут отличаться друг от друга. Сайт считается валидным, если у него отсутствуют ошибки в коде страниц сайта. Ошибки могут появляться в ходе разработки сайта, например, когда неверно закрыты html-теги или не закрыты вовсе, когда используются устаревшие теги, не задан тип документа (<!DOCTYPE html>), некорректно организована вложенность элементов и другие. Часть ошибок могут быть видимыми, и пользователь сможет заметить их при посещении страниц сайта, часть ошибок может быть скрытой от глаз.

Наиболее популярный и зарекомендовавший себя валидатор, на наш взгляд, – validator.w3.org, он сканирует сайт на наличие ошибок в соответствии с принятыми Консорциумом Всемирной паутины стандартами. Данный валидатор имеет 3 способа проверки на ошибки: ввести URL конкретной страницы вашего сайта, загрузить файл страницы сайта и ввести часть кода сайта, которую необходимо проверить.

После выполнения проверки вам будет предоставлен список ошибок на странице с указанием описания ошибки, номер строки с ошибкой и в какой части строки содержится ошибка.

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

Также существуют плагины для браузеров для поиска ошибок на страницах сайта.

http://users.skynet.be/mgueury/mozilla/ – плагин для Mozilla

https://chrome.google.com/webstore/detail/html-tidy-browser-extensi/gljdonhfjnfdklljmfaabfpjlonflfnm – плагин для Chrome

https://addons.opera.com/en/extensions/details/validator/ – плагин для Opera

После того как сайт проверили на ошибки, встает вполне резонный вопрос: нужно ли их немедленно удалять и чем это чревато при SEO-продвижении?

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

В первую очередь рекомендую обратить внимание на ошибки, связанные с контентом, т.к. для поисковиков данный фактор является важным при ранжировании сайтов. Если ошибок на страницах сайта достаточно много (более 25), то настоятельно рекомендуется устранять ошибки в коде, т.к. сайты с большим количеством ошибок дольше загружаются, а также их сложнее проиндексировать, что может привести к отсутствию части страниц сайта в индексе поисковой системы.

Давайте проанализируем, сколько ошибок присутствует в коде страниц у крупных ресурсов.

Яндекс:

Google:

ОАО «РЖД»:

Как вы уже заметили, даже у сайтов поисковых систем присутствуют ошибки в коде страниц, что лишний раз подтверждает, что устранение ошибок носит скорее рекомендательный характер, при этом стоит упомянуть, что не нужно пренебрегать этим фактором и «запускать» ваш сайт. Развивайте сайт комплексно, всесторонне, тогда и результат будет соответствовать вашим ожиданиям.

Кстати, проверка сайта на ошибки, которые действительно влияют на продвижение, проходит в рамках SEO-аудита. Если сомневаетесь, что можете адекватно оценить свой сайт на наличие ошибок, обращайтесь. 

Справочник ошибок и ответов API

При выполнении некорректного запроса к системе наше API может вернуть код ошибки, в случае же верного запроса, API вернёт ответ. Вы, конечно, уже обрабатывали ответ сервера в ходе отладки своих виджетов или написании скриптов, взаимодействующих с нашей системой. Для Вашего удобства, мы решили систематизировать все возможные ответы и ошибки, отдаваемые нашей системой и разместить их на отдельной странице. Надеемся это облегчит и ускорит интеграцию Ваших проектов с amoCRM.

Ошибки при валидации данных

Если переданные данные не совпадают с теми, что доступны для сущности, запрос вернет HTTP-код 400 Bad Request и массив с параметрами, которые не подошли под условия.

Пример ошибки валидации данных

{
    "validation-errors": [
        {
            "request_id": "0",
            "errors": [
                {
                    "code": "NotSupportedChoice",
                    "path": "custom_fields_values.0.field_id",
                    "detail": "The value you selected is not a valid choice."
                }
            ]
        }
    ],
    "title": "Bad Request",
    "type": "https://httpstatus.es/400",
    "status": 400,
    "detail": "Request validation failed"
}

Ответы при авторизации

Подробнее об авторизации читайте здесь

Ответы при работе с контактами

Подробнее о работе с контактами читайте здесь

Ответы при работе со сделками

Подробнее о работе со сделками читайте здесь

Ответы при работе с событиями

Подробнее о работе с событиями читайте здесь

Ответы при работе с задачами

Подробнее о работе с задачами читайте здесь

Ответы при работе со списками

Подробнее о работе со списками читайте здесь

Ответы при работе с элементами каталога

Подробнее о работе с элементами каталога читайте здесь

Ответы при работе с покупателями

Подробнее о работе с покупателями читайте здесь

Другие ответы

Ошибки и ответы, не относящиеся к какому-либо конкретному разделу

Хочешь в ТОП-3 Google? Оставляй заявку и получи предложение!
Хочешь в ТОП-3 Google? Оставляй заявку и получи предложение!

Валидация

Валидация — это проверка значений, указанных пользователем, и отображение найденных ошибок.

Описанное здесь поведение валидаций и отображение ошибок реализовано в библиотеке «React UI Validations», по возможности используйте эту библиотеку в продукте.

Принципы

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

Виды валидации

Существует три вида валидаций: мгновенная, по потере фокуса и по отправке формы.

Чем раньше интерфейс сообщает об ошибке, тем лучше — пользователю проще вернуться и исправить ошибку.

Валидация по потере фокуса

Когда использовать

Этот вид валидации подходит для большинства случаев.

Как работает

Не валидируйте поля на пустоту по потере фокуса — не показывайте ошибку если поле не заполнено, возможно пользователь вернется и заполнит поле чуть позже. Показывать ошибку в таких случаях можно только после отправки формы.

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

Валидация при отправке формы

Когда использовать

Используйте этот вид валидации, когда нельзя проверить поля по потере фокуса. Например, для проверки заполнения обязательных полей.

Как работает

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

Блокирование кнопки отправки

Как только заполнены все обязательные поля — кнопка становится активной. Если после этого пользователь стер значение в одном из полей — кнопка снова должна стать не активной.

Сообщения об ошибках

Из этих двух способов мы рекомендуем использовать тултипы. Они идут отдельным слоем, поэтому не раздвигают форму и легко размещаются, даже если поля на форме расположены плотно.

Тултипы

Как работают

Если значение в поле с ошибкой было изменено, потеряло фокус, а потом заново оказалось в фокусе — тултип с текстом старой ошибки уже не возникает. Это правило одинаково работает для всех типов валидаций: и по потере фокуса, и при отправке формы.

Единообразие поведения и внешнего вида

Показывайте тултипы справа от полей. Eсли в этом случае они перекрывают важное содержимое на странице, выводите тултипы сверху. Придерживайтесь единообразия, но помните, что контент важнее него.

Красные тексты на странице

Как работают

Красный текст ошибки появляется сразу, как только произошла валидация и ошибочное поле подсветилось.

Как только пользователь начал исправлять значение, красная подсветка поля исчезает, и цвет текста ошибки меняется на черный — #222.

Текст ошибки пропадает по потере фокуса и больше не появляется, если поле заново получает фокус. Это правило одинаково работает для всех типов валидаций: и по потере фокуса, и при отправке формы.

На более сложных формах выводите сообщение об ошибке в тултипе.

Валидация зависимых полей

Зависимые поля — это поля, значение которых зависит друг от друга.

Подсветка зависимых полей пропадает, как только пользователь начал исправлять значение в одном из этих полей.

Если при заполнении зависимого поля нарушен формат значения, сообщайте о такой ошибке при потере фокуса. Например, пользователь ввел 3 цифры в поле ИНН и убрал фокус. Такое поле должно подсветиться сразу же.

Пример

Теперь по нажатию кнопки «Отправить» все будет хорошо.

Intermediate

Валидация данных

Все данные из инпутов должны пройти валидацию перед тем, как отправиться на сервер. Валидация данных происходит с помощью DataProcessor,
HTMLForm и Form, а также во всех компонентах данных (DataTable, DataView,
Tree, TreeTable, List).

Когда происходит валидация:

• Обычно валидация происходит при вызове метода validate(). В какой момент можно вызвать метод:
  • при отправке формы;
  • при любом внутреннем событии (onChange для формы, onAfterEditStop для компонентов данных);
• С помощью DataProcessor данные валидируются каждый раз, когда вы отправляете их на сервер. Если валидация не проходит, данные не отправляются на сервер;
• В случае с компонентами данных данные валидируются при каждом изменении — редактировании, добавлении и обновлении (в момент вызова методов add() и update());
• С помощью динамической валидации HTML5 в случае с Webix формами и HTML формами.

Первые три варианта относятся к библиотеки Webix и работают по правилам валидации. Последний вариант — особенность HTML5.

Валидация с помощью API

Валидацию данных можно произвести при любом событии любого элемента формы. Вы можете валидировать любое количество контролов или всю форму.

Обычно валидация в форме или HTML форме привязана к кнопке submit посредством обработчика события click:

{ view:"button", value: "Submit", click:function(){
    form.validate(); 
}}

Вы также можете валидировать данные в любой момент, например при событии onChange:
{ view:"text", name: "fname", on:{
    "onChange":function(){
        // валидация всей формы
        this.getParentView().validate(); 
        // или валидация элементов
        this.validate();
    }}
}

Динамическая валдиация в форме
Вы можете добавить событие валидации контролу обычным путём (как на примере выше) или же с помощью специального свойства validateEvent, которое позволяет автоматически добавить два события:

«blur» — начать валидацию при событии onBlur, когда фокус смещён с контрола;
«key» — начать валидацию при событии onKeyPress, когда пользователь вводит какой-либо символ в поле ввода.

Обратите внимание, что метод работает только для этого контрола.
В случае компонентов данных, валидировать данные можно при их загрузке:
 webix.ui({
    view:"datatable",
    // конфиг
    ready:function(){
        this.validate();
    }
});

Related sample:  Datatable: Cell Validation
Частичная валидация
С помощью метода validate() вы можете валидировать:

всю форму или компонент

form.validate(); // валидируются все поля
list.validate(); // валидируются все данные списка


отдельный элемент компонента

list.validate(2); // валидация элемента с id=2 
text.validate(); // валидация данного текстового поля

Обратите внимание, что при валидации отдельного поля формы будут учитываться только правила для этого поля.
webix.ui({
    view:"form", elements:[
        { view:"text",  required:true, name:"text1" },
        { view:"text",  validate:webix.rules.isNumber, name:"text2" }
    ]
});
 
$$("text1").validate();

Related sample:  Per Item Validation with Predefined Rules
Сообщения при валидации
Если какой-либо элемент не прошёл валидацию, он подсвечивается красным (работает как для библиотечной, так и для HTML5 валидации).
Вы также можете применить встроенные сообщения валидации для полей форм.

Всё, что вам необходимо сделать — определить свойство invalidMessage и указать текст сообщения:
{ 
    view:"text", 
    label:"Username", 
    name:"login", 
    invalidMessage:"Login can not be empty" 
}

Сообщения для валидации требуют пространства под полями формы. Вам необходимо определить свойство bottomPadding и указать подходящее значение для нижнего отступа поля:
var formElements = [
    { view:"text", label:"Username", name:"login", 
        invalidMessage: "Login can not be empty" }
];
 
webix.ui({
    view:"form",
    elementsConfig:{
        labelPosition: "top",
        labelWidth: 140,
        bottomPadding: 18
    },
    elements: formElements
});

Related sample:  Validation Message
Если значение не задано, пространство для сообщений о валидации автоматически подстраивается под размер шрифта.
Как добавить описание поля
Вы можете добавить подсказки для корректного заполнения полей.

Свойство bottomLabel как раз для этой цели. Не забудьте указать свойство bottomPadding для определения размеров ярлыка.
{ view:"text", type:"password", label:"Password", bottomPadding: 35, 
    bottomLabel: "*The password must have at least 6 characters"},

Related sample:  Input Description at the Bottom
Обработка валидации
Пользовательские сообщения можно использовать в процессе обработки валидации. Достигается это одним из двух путей:
1 . Сообщения Webix можно использовать вместе с методом validate() внутри пользовательской функции sumbit_form;
webix.ui({
    view:"form", 
    id:"myform", 
    elements:[
        {},  // поля ввода
        { view:"button", inputWidth:300, label:"Submit", click:submit_form }
    ]
});
 
submit_form = function(){
    if (this.getParentView().validate()) // если валидация успешна
        webix.message("All is correct");
    else
        webix.message({ type:"error", text:"Form data are invalid" });
};

2 . Вы также можете добавить сообщения в события валидации через свойство on. Возможные события:

onAfterValidation — срабатывает после валидации;
onValidationSuccess — срабатывает при успешной валидации;
onValidationError — срабатывает в случае ошибки валидации. 

Ниже мы рассмотрим пример того, как можно оформить сообщение при ошибке валидации:
webix.ui({
    view:"form",
    on:{
        onValidationError:function(key, obj){
            text = "Login can't be empty";
            webix.message({ type:"error", text:text });
        }
    }
});

Related sample:  onValidationError’ Event
Каждый тип сообщения детально описан здесь.
Правила валидации
Функция validate() проверяет, соответствуют ли данные указанным в объекте rules правилам. Объект содержит коллекцию пар свойство-правило.

Заранее заданные правила доступны через класс webix.rules.
Валидация формы
В этом случае вы добавляете правила полям по их именам. Name — это свойство только для чтения, которое можно добавить любому полю формы/html формы.
Это можно сделать внутри объекта rules:
view:"form", elements:[
    {view:"text", name:"field1"},
    {view:"text", name:"field2"}
],
rules:{
    field1:rule1,
    field2:rule2
}

Related sample:  Basic Validation
Вы также можете добавить правило прямо в конструктор поля как значение свойства validate:
view:"form", elements:[
    { 
        view:"text", 
        label:"Is a Number", 
        validate:webix.rules.isNumber, 
        name:"text2" 
    },
    { 
        view:"text", 
        label:"Is an Email", 
        validate:webix.rules.isEmail, 
        name:"text3" 
    }
],
elementsConfig:{
    labelAlign:"right",
    on:{
        'onChange':function(newv, oldv){
            this.validate();
        }
    }
}

Related sample:  Per Item Validation with Predefined Rules
Валидация данных компонента
Чтобы указать, какой элемент данных вы хотите валидировать, определите #value# у темплейта этого элемента или, в случае datatable, ID столбца.
rules:{
    "template/ID": rule
}

Правила валидации могут быть трёх типов:

Встроенные 
Пользовательские
С использованием ключей валидации

Встроенные правила
Существует 4 таких правила:

isNotEmpty — проверяет есть ли значение вообще;
isNumber — проверяет, является ли значение числом;
isEmail — проверяет, является ли строка e-mail (ищет символ @, точку и текст после неё);
isChecked — проверяет состояние чекбокса.

webix.ui({
    view:"form1",
    elements:[
        { view:"text", label:'Username', name:"login" },
        { view:"text", label:'E-mail address', name:"email"},
        { view:"text", label:'Password', name:"password"},
        { view:"checkbox", labelRight:'I accept terms of use', name:"accept"}
 
    ],
    rules:{
        login: webix.rules.isNotEmpty,
        email: webix.rules.isEmail,
        password: webix.rules.isNumber,
        accept: webix.rules.isChecked
    }
});

Related sample:  Validation with Predefined Rules
Если вы парсите JSON данные, встроенные правила задаются следующим образом:
"rules":{  
   "login":"isNotEmpty"
}

Обратите внимание, что если вы указываете правила в конструкторе поля, правило isNotEmpty можно заменить на свойство required.
// лучше использовать required
{ view:"text", label:"Not Empty", required:true }
// вместо правила
{ view:"text", label:"Not Empty", validate:webix.rules.isNotEmpty }

Related sample:  Required Inputs in a Form
Пользовательские правила
По большому счёту, любая пользовательская функция может быть правилом. Такая функция принимает следующие параметры:

value — (any) — значение поля
fields — (object) — все значения формы в виде объекта (те же, что возвращаются методом getValues())
name — (string) — имя поля

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

Валидация чисел

webix.ui({
    view:"form",
    rules:{
        text1:function(value){ return value > 100; },  // больше 100
        text2:function(value){ return value < 100; }, // меньше 100
        text3:function(value){ return value > 0;} // положительное число
    }
});

Related sample:  Validation with Custom Rules
Условное использование встроенных правил
Встроенные правила можно обернуть в другую функцию и применять их выборочно:

Игнорируем пустые значения

rules:{
   city:function(value){
        return !value || webix.rules.isNumber(value)
  }
}

Специальные ключи валидации
Ключи используйте как в случае встроенных правил, так и в случае пользовательских для особых случаев:

если вам необходимо применить одно и то же правило к каждому свойству объекта данных — используйте ключ $all;
если для валидации вам нужны данные с нескольких полей — используйте ключ $obj.

Ключ $all
Правила, указанные через ключ «$all», будут применены к каждому полю формы.
Ключ «$all» можно использовать со встроенными правилами:

Все поля должны быть заполнены

rules:{
    $all:webix.rules.isNotEmpty
}

Related sample:  Validation with a Common Rule for All Fields
или с набором правил пользовательской функции, которая принимает следующие параметры:

value — (any) — значение поля
fields — (object) — все значения формы в виде объекта (те же, что возвращаются методом getValues())
name — (string) — имя поля

$all:function(value, fields, name){
   if(name !=="notes") // все поля, кроме "notes" 
       return webix.rules.isNotEmpty(value);
   else // другое правило или же окончание валидации 
      return true; 
}

Ключ $obj
Ключ «$obj» используется в случае, когда правила заданы пользовательской функцией. Она принимает следующие параметры:

value — (object) all form values as an object
fields — (object) all form values as an object (just the same as the rule is common for all form fields)
name — (string) an empty string, as it is a common rule

Функция вызывает единожды и для всей формы. Если она возврашает true, форма прошла валидацию и наоборот.
Т.к. в правило передаётся весь объект данных, данные поля доступны как obj.field_name.

Значения votes и rank должны быть положительными

rules: {
    $obj:function(obj){  // obj = value
        return obj.votes > 0 && obj.rank > 0;}
}

Related sample:  Datatable Validation. Complex Rule.
Её также можно использовать в более сложных валидациях, например, когда требуется подтверждение пароля.

Пароли должны совпадать

rules:{
    $obj:function(data){ // data = value
        if (data.pass1 != data.pass2){
            webix.message("Passwords are not the same"); 
            return false;
        }
        return true;
    }
}

Related sample:  Password Confirmation
Вы также можете проигнорировать параметры функции и работать напрямую со значениями формы, полученными методом getValues().

Сложное правило

webix.ui({
    view:"form",
    rules:{
        $obj:function(){
            var data = this.getValues(); // получаем объект данных
            if (!webix.rules.isEmail( data.email ))  // проверяем email
                return false;
            if (data.name == "") // проверяем name
                return false;
            return true; // успех!
        }
    }
});

Related sample:  Validation with a Complex Rule
Валидация скрытых и заблокированных полей формы
По умолчанию скрытые и заблокированные поля формы не валидируются.

Если вы хотите включить их в процесс валидации, необходимо указать режим валидации:
// валидирует скрытые поля
$$("$form1").validate({hidden:true});
 
// валидирует и скрытые, и заблокированные поля
$$("$form1").validate({hidden:true, disabled:true});

Related sample:  Form with Tabs
Обратите внимание, что если скрыта сама форма, то скрытые и видимые поля неразличимы.
Валидация данных для компонентов
Так же, как и в случае с формой, правила для компонентов указываются в конструкторе. При активной валидации вы будете предупреждены о некорректных данных на стороне клиента (эти данные не будут загружены на сервер).
Валидируемый элемент определяется темплейтом.

Валидация данных списка

webix.ui({
    view:"list",
    template:"#rank#. #title#",
    rules:{
        title: webix.rules.isNotEmpty
    },
    // конфиг списка
});

В результате вы не сможете добавить пустую запись в список.
Related sample:  List: Validation
Читайте подробнее о темплейтах данных.
В случае с datatable нам нужен ID столбца, т.к. он коррелирует с элементами данных.

Валидация данных таблицы

webix.ui({
    view:"datatable",
    columns:[
        { id:"rank", header:""},
        { id:"title", header:""}
    ],
    rules:{
        "rank": positiveNumber, // пользовательское правило
        "votes": positiveNumber
    }
})

Related sample:  Datatable: Cell Validation
Некорректные данные подсвечиваются и не могут быть отправлены на сервер (если вы работаете с dataprocessor).
Валидация при редактировании данных компонента
По умолчанию, если правила заданы, валидация начинается каждый раз, когда пользователь завершает редактирование и закрывает редактор того или иного элемента.
Однако события редактирования  позволяют валидировать данные при открытом редакторе. Очевидный бонус такого подхода — то, что пока пользователь не введёт корректные данные, они не сохраняться в компоненте.
В таком случае поможет событие onBeforeEditStop:
webix.ui({
    view:"datatable",
    // конфиг
    on:{
        onBeforeEditStop:function(state, editor, ignore){
            var check = ( editor.type.getValue() != "" );
            if (!ignore && !check){
                webix.message(editor.column+" must not be empty");
                return false;
            }
        }
    }
});

Related sample:  Datatable. Editing Validation.
Функция принимает 3 аргумента:

state — объект, который хранит новое и старое значение редактора;
editor — редактор;
ignore — флаг, который определяет сохранить новые данные или восстановить старые. 

Более подробную информацию о текстовых редакторах читайте в соответствующей статье.
Валидация данных в HTML5
Здесь мы говорим о клиентской стороне и валидации данных средствами HTML5.

В HTML5 поля бывают самых разных типов и включают в себя множество атрибутов, которые определяют шаблон валидации.
Типы полей совпадают со свойством type компонента text, а другие атрибуты собраны в объекте  attributes:

HTML

<input type="text" id="text1" 
    title="First name is required!" 
    maxlength="25"
    placeholder="Your name" required>
<label for="text1">Имя</label>


JavaScript

{   
    view:"text", 
    type:"text", attributes:{
        maxlength:25,
        required:"true",
        title:"First name is required!"
    }, 
    value:"", 
    label:"First Name"
}

В этом случае валидация возможна с помощью атрибута required.
Валидация начинается, как только пользователь вводит первый символ в поле ввода. Если срабатывает необходимый шаблон, красная подсветка исчезает. Более того, если пользователь попытается отправить форму, для каждого поля с некорректными данными появится сообщение об ошибке:

в случае с неверными данными в поле: «Please enter an email address/a URL!» — в зависимости от значения свойства type;
в случае пустого поля: «Please fill out this field!»

Типы полей HTML5 для библиотечной формы:

text (значение по умолчанию);
password — скрывает введённые символы;
email — требует символ @ для валидации;
url — требует префикс http:// для валидации. 

Related sample:  HTML5 Data Validation
Статьи по теме

Создании сообщений

Наверх