Валидаторы html и css

CSS Validator User’s Manual

How to use the CSS Validator

The simplest way to check a document is to use the basic interface. In this page
you will find three forms corresponding to three possibilities:

Simply enter the URL of the document you want to validate.
This document can be HTML or CSS one.

Validation by file upload

This solution allows you to upload and check a local file. Click the
«Browse…» button and select the file you want to check.

In this case, only CSS documents are allowed. It means that you
cannot upload (X)HTML documents. You also must be careful with
@import rules since they will be followed only if they explicitely
reference a public URL (so, forget relative paths with this solution)

Validation by direct input

This method is perfect for testing CSS fragments. You just have to
write your CSS in the textarea

The same comments as before apply. Note that this solution is
very convenient if you have a problem and need some help from the community.
It’s also very useful to report a bug, since you can link to the resulting
URL to give a test case.

What does the basic validation do?

When using the basic interface, the validator will check the compliance
against CSS 2.1, which is the current
CSS technical recommendation.
It will produce an XHTML output without any warning (you will only see
errors).
The medium is set to «all», which is the medium suitable for all devices
(see
http://www.w3.org/TR/CSS2/media.html for a complete description of
media).

Advanced validation

If you need a more specific check, you can use the advanced interface which
allows to specify three parameters. Here is a little help on each of these
parameters.

Warnings

This parameter is useful to tune the verbosity of the CSS Validator. Indeed,
The validator can give you two types of messages: errors and warnings.
Errors are given when the checked CSS does not respect the CSS
recommendation. Warnings are different from errors since they do not state a
problem regarding the specification. They are here to warn (!) the CSS
developper that some points might be dangerous and could lead to a strange
behaviour on some user agents.

A typical warning concerns font-family: if you do not provide a generic font,
you will get a warning saying that you should add one at the end of the rule,
otherwise a user agent that doesn’t know any of the other fonts will switch
to it’s default one, which may result in strange display.

Profile

The CSS validator can check different CSS profiles. A profile lists all the
features that an implementation on a particular platform is expected to
implement. This definition is taken from
. The default choice corresponds to the current most used one:
CSS 2.

Medium

The medium parameter is the equivalent of the @media rule, applying to all
the document. You will find more information about media at

http://www.w3.org/TR/CSS2/media.html
.

Experts Only

Validation Request Format

Below is a table of the parameters you can use to send a query to the W3C
CSS Validator.

If you want to use W3C’s public validation server, use the parameters
below in conjunction with the following base URI:http://jigsaw.w3.org/css-validator/validator
replace with the address of your own server if you want to call a private
instance of the validator.

Note: If you wish to call the validator programmatically
for a batch of documents, please make sure that your script will
for at least 1 second between requests.
The CSS Validation service is a free, public service for all, your respect is
appreciated. thanks.

Parameter	Description	Default value
uri	The URL of the document to validate. CSS and HTML documents are allowed.	None, but either this parameter, or must be given.
text	The document to validate, only CSS is allowed.	None, but either this parameter, or must be given.
usermedium	The medium used for the validation, like , , …
output	Triggers the various outputs formats of the validator. Possible formats are and (XHTML document, Content-Type: text/html), and (XHTML document, Content-Type: application/xhtml+xml), and (SOAP 1.2 document, Content-Type: application/soap+xml), and (text document, Content-Type: text/plain), everything else (XHTML document, Content-Type: text/html)	html
profile	The CSS profile used for the validation. It can be , , , , , , , , , or	the most recent W3C Recommendation: CSS 2
lang	The language used for the response, currently, , , , , , , , , , , .	English ().
warning	The warning level, for no warnings, for less warnings, or for more warnings	2

CSS Validator Web Service API: SOAP 1.2 validation interface documentation

For more technical help, in particular about the SOAP 1.2 output and all
the possible ways to call the validator, see the
CSS Validator Web Service API.

Что означает W3C?

Аббревиатура W3C (World Wide Web) обозначает сообщество единых стандартов.

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

С развитием Сети между создателями различных браузеров постоянно ведется ожесточенная борьба за первенство.

И были времена, когда разработчики даже пытались внедрить свои собственные стандарты.

Однако первоисточнику удалось сохранить стандарты таких веб-страниц, какими мы видим их сейчас.

И сегодня веб-мастерам остается лишь придерживаться этих правил при создании ресурсов.

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

В этой статье мы будем много говорить о стандартах HTML, и в связи с этим возникает резонный вопрос: а для чего вообще они были введены?

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

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

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

Но с развитием технологий пришло понимание необходимости создать единый стандарт языка разметки веб-страниц.

Это делает работу в Сети удобной для большинства пользователей, независимо от того, в какой части света они находятся и какой браузер используют.

Итак, целью утверждения стандартов html является:

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

Валидность и другие показатели качества сайта

Еще многое предстоит сделать по расширению возможностей сервиса, в планах по реализации три дополнительных направления:

1. Доступность. Соответствие стандарту WCAG (Web Content Accessibility Guidelines), обеспечивающему доступность содержимого сайта для людей с ограниченными возможностями.
2. Совместимость. Мультиплатформенная совместимость снижает затраты на разработку и позволяет пользователям просматривать сайт в любом браузере.
3. Оптимизация. Упрощение и минимизация кода, оптимизация графики и контента делает сайт более открытым для поисковых систем и удобным для пользователей.

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

Рекомендую ознакомиться с другими моими обзорами средств анализирования сайта из рубрики Аудит и тестирование. И конечно же жду Ваших отзывов! Как думаете, сервис найдет свое место в нише и будет пользоваться спросом?

The «Philosophy» of the LogValidator

Step-by-step quality

Log Validator is a web server log analysis tool with focus on the quality of Web documents.
Thanks to a modular, extensible design, the Log Validator can help Web authors find the most
popular content on their web site that matches particular criteria.

The Log Validator was first written with Validation (HTML, etc.) in
mind : it can thus help web content managers find and fix the most
frequently accessed invalid documents on their Web site, acting as a
comprehensive, step-by-step
validation tool.

What this tool does (and does not)

This tool takes a web server’s last logs and processes it through validation
modules. Those validation modules check the most popular documents’
validity for a certain technology . The default module is HTML validation, but there
are others available (see the for
supported technologies).

The (X)HTML validation module, for example, helps you
find, among the most popular pages on your site, which are invalid, and thus tell you
which (invalid) pages you should fix first. This is a step-by-step process, you can
set up this tool to run every week, and painlessly fix only a few documents at the
time. Eventually, you will have fixed your whole site, or at least the most important
parts of it. (see also for the HTML module)

Log Validator mini-FAQ

What is this?

A free, simple and step-by-step tool to improve dramatically the quality of your website. Find
the most popular invalid documents, broken links, etc., and prioritize the work to get them fixed.

Who should use this?

Anyone writing or maintaining websites, especially large ones.

Where is the documentation?

All the information on how to use this tool is in the Manual.

Where do I get it?

See the download instructions.

I’m a developer, can I help? ・ Where can I report bugs?

The tool is open source, developers are welcome to help, and bug reports are welcome, too.
See for details on participation and feedback.

Still unclear what exactly the tool does?

• See the Screenshots and examples of use,
• Read what others say about it,
• or simply read on for more info.

Download and Install the CSS Validator

Download the CSS Validator

The CSS validator is available in three different packaging: from Git for developers who want the very latest version,
as a jar archive to build applications and for use as a command line tool, and (since 2009) as a war archive for server-side
applications.

Download the source code

The source of the CSS Validator can be retrieved with Git.
Please note that the online service for the CSS validator is a stable release,
generally a little older than the version under Git, and their results and behaviour may differ.

Download the Java archive (jar)

Installation Guide

The CSS Validation service is based on a servlet written in the cross-platform Java language, and can
be installed on any servlet platform. While the official service from W3C runs under the Jigsaw server
(which is the recommended setup), we will for the sake of convenience describe in this guide the setup
under Apache’s servlet engine, Tomcat, as well as some quick instructions for Jigsaw and commandline usage.

Prerequisites

This guide assumes that you have already downloaded and installed successfully the following:

• a working java environment ;
• the Ant java build tool ;
• a Java servlet container such as Jigsaw,
  Tomcat or Jetty, if you plan to provide the validator as a web service.

As a prerequisite to the installation, you will need to know the complete path to the java library called servlet.jar.
It is generally available within /common/lib/, with being the path under which Tomcat is installed. It may also be found under the name servlet-api.jar. If you can not
find it, java.sun.com will have it.

Installation of the CSS validator under Tomcat

1. Download the Git source as explained  ;
2. Edit the file called build.xml and replace the value of
   property servlet.lib with the full path to servlet.jar

3. You can now build the source : from [VALIDATOR_DIRrun the command ant war.
   Running ant should download a number of necessary libraries, and build the archive called css-validator.war.

4. Copy or move css-validator.war to /webapps.
5. Finally, restart the Tomcat engine :"cd ; ./bin/shutdown.sh; ./bin/startup.sh;"

Installation of the CSS validator under Jigsaw

1. Download the Git source as explained previously, save it under /WWW
   and build source with ant jigsaw ;
2. Next, configure the root folder for the validator (in most cases it will be called css-validator) to make it a servlet container.
   Within your Jigsaw installation, launch the Jigsaw Admin utility, browse to and change it from HTTPFrame to ServletDirectoryFrame ;
3. The next step will be to create a «validator» resource as ‘ServletWrapper’ class. A ‘ServletWrapperFrame’ frame will automagically
   be created for it. You will need to provide the name of the servlet class, which for the CSS Validator os org.w3c.css.servlet.CssValidator.
   Note that a file called “validator” may already be present – you MUST rename it, as the validator absolutely needs to enforce this name for the servlet wrapper ;
4. Make sure that all the .jar libraries within the /WWW/css-validator/lib folder
   are properly added to Jigsaw’s CLASSPATH setup.
5. Finally, restart Jigsaw and point your browser to the validator. The URI should be something like :
   http://localhost:8001/css-validator/validator.html

Any computer with Java installed can also run the validator from the terminal/console as a commandline tool.
Download the css-validator.jar jar archive (or build it with ant jar) and run it as :java -jar css-validator.jar http://www.w3.org/.

Validator parameters

Every validator can save parameters. Validators are responsible for saving their type and parameters, because they are simple functions, and we may want to inform the user about them.

Use withParams to apply parameters to a validator. Declared parameters bubble up by one level, so they are included in the $params of the parent validation object. Vuelidate is designed in a way that does not allow the validation result to directly include params.

You may call the $flattenParams method on a validation object to get an array of validator params for all validators that exist in that validation object. For example, let’s say a validation object contains a between validator to check that a value is between 5 and 10. Calling $flattenParams returns the following array.

Что такое валидность?

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

Валидность сайта — это соответствие кода существующим стандартам HTML.

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

Что такое валидаторы кода

Валидатор кода — это программа, используя которую можно проверить HTML-код страниц и CSS-код на соответствие современным нормам. Она находит и фиксирует некорректные элементы, указывая на их местонахождение и формулируя, что именно оформлено неверно.

Основные «приметы» валидной верстки

Валидная вёрстка содержит код, полностью соответствующий требованиям W3C (World Wide Web Consortium), занимающейся разработкой технологических стандартов для всего Интернета.

Если код на страницах сайта верный, то во всех браузерах сайт отображается корректно (а не криво).

Отсутствуют подозрения о несправедливом «понижении» в выдаче и нет страниц, выкинутых из индекса.

Пример. Если, предположим, неправильно стоят теги <h1>..<h6>, <noindex> (в частности, отсутствует закрывающий элемент), то поисковик не будет ничего исправлять — он будет интерпретировать так, как написано черным по белому в коде. В итоге могут возникнуть последствия, связанные уже с продвижением сайта.

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

Всего выделяют четыре вида валидации.

Перспективная валидация

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

Сопутствующая валидация

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

Ретроспективная валидация (ревалидация)

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

Повторная валидация

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

Errors and Warnings suppressing

You can ignore some errors or warnings by suppressing them.Note! This feature can be used only on , and formats.

You need to specify field in your project file.

Here can be two arrays, for errors () and warnigns().
Values must be a string parts or fully value of «unwanted» message.
Under the hood — node-w3c-validator will use
method for filtering messages.

For example, you receive warning message:

The “type” attribute for the “style” element is not needed and should be omitted.

Now you can suppress it

{"nodeW3Cvalidator"{"suppressErrors","suppressWarnings""The “type” attribute for the “style” element is not needed and should be omitted."}}

Or like this with a part of message:

{"nodeW3Cvalidator"{"suppressErrors","suppressWarnings""is not needed and should be omitted"}}

Специализированная JavaScript-проверка

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

Наиболее полезным из них является метод setCustomValidity(), с использованием которого можно написать специальный сценарий для проверки конкретных полей, который будет работать с системой валидации HTML5.

Осуществляется это следующим образом. Прежде всего, значение соответствующего поля проверяется на правильность. Это делается с помощью обычного события oninput:

В данном примере событие oninput активизирует функцию validateComments(). Ответственность за написание этой функции, проверку текущего значения поля <input> и вызова метода setCustomValidity() лежит на разработчике.

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

Далее приводится пример использования этого метода для проверки требования, чтобы значение в поле содержало не менее 20 символов:

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

Source code and package availabilityfor the W3C Markup Validator

The W3C Markup Validator provides Perl/CGI/SGML/XML/DTD-based
validation of a variety of document types.
SGML and DTDs are older technologies that never found wide use on
the Web, so for checking of HTML documents using modern
technologies, you probably want to instead use the
W3C HTML Checker.
To do that,

• Download the
  latest release version.
• Read the
  usage guide.

If for some reason you’d rather run a service based on the same source as
the W3C Markup Validator, this page provides the following information:

Installing from packages

Rather than trying to install and run an instance of the W3C from
the sources, it’s much easier to install one of a variety of
pre-built packages. The sections below provide information about
packages available for various systems.

Fedora/Red Hat RPM package

Fedora RPM packages of the validator are included in Fedora.
The name of the validator package is w3c-markup-validator,
use the standard automated package management tools of the
distribution (such as yum) to install it along with its
dependencies.

For Red Hat Enterprise Linux and derivative distributions, the
w3c-markup-validator package is available in
EPEL.

openSUSE/SUSE Linux RPM package

openSUSE/SUSE Linux RPM packages of the validator are available,
courtesy of Sierk Bornemann, at software.openSUSE.org,
<http://software.opensuse.org/>.
Starting with openSUSE 10.3, the latest stable validator package and all its
dependencies are included in the official stable openSUSE distribution.
The name of the validator package is w3c-markup-validator,
use the standard automated package management tools of the
distribution (such as YaST, zypper, smart,
apt4rpm or yum) to install it along with its
dependencies.

Additionally, you can also get these and other needed packages
from the openSUSE Software Repository at
<http://software.opensuse.org/package/w3c-markup-validator>

Debian GNU/Linux package

A Debian package is available, courtesy of Frédéric
Schütz.

Starting with Debian 3.1 («Sarge»), the package and all its
dependencies are included in the official Debian distribution, and
can be installed by running the command apt-get install
w3c-markup-validator as root.

Mac OS X Application

The Validator is also packaged as a standalone Mac OS X Application,
called Validator S.A.C., courtesy of Chuck Houpt.

Getting the source

The source code for the W3C
Markup Validation Service is available under the terms of the
W3C
Software License.

If you just want to glance at the code, or see its revision
history, you can
browse it
directly in Github.

The most interesting files are currently
a
CGI script called «check» that does pretty much everything,
and possibly also the
httpd.conf configuration file snippet for Apache.
Select the topmost revision numbers on these
pages to see the most recent revision of each file.

To actually install and run an instance of the W3C Markup Validator from
the sources, see the
installation manual.

Сайты проверки валидации

validator.w3.org

W3C (World Wide Web Consortium) – это группа, которая разрабатывает все стандарты для веб-технологий, поэтому имеет смысл использовать только данный валидатор для проверки правильности вашего HTML. Проверяемый файл страницы может быть проверен онлайн или загружен, так же валидатор может отображать свой отчет в нескольких форматах – с рекомендациями, в виде схемы, с рекомендациями и т.д..

jigsaw.w3.org

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

Validome.org

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

Используем JavaScript

JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.

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

Стандартный тултип валидации

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

Добавляем несколько сообщений об ошибках в один тултип

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

Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях , и обратная логика: — значение не удовлетворяет атрибуту, — удовлетворяет.

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

Теперь при попытке отправить форму мы увидим вот это:

Отображаем несколько ошибок в одном тултипе

Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.

Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.

Показываем все ошибки для всех полей.

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

Этого можно добиться какой-то парой дополнительных строчек в нашем коде:

Вот что происходит при клике на submit теперь:

Отображаем все ошибки для всех полей в DOM

Используем нестандартные проверки валидности

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

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

Валидация в реальном времени

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

1. Требования для каждого поля чётко видны до того, как пользователь начал печатать.
2. Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
3. Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.

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

Пример валидации в реальном времени

Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.

5 последних уроков рубрики «HTML5»

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

• Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

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

• Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

• Знакомство с фрэймворком Webix

  В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Проверка с помощью регулярных выражений

Самым мощным (и самым сложным) поддерживаемым HTML5 типом проверки является проверка на основе регулярных выражений. Поскольку JavaScript уже поддерживает регулярные выражения, добавление этой возможности к формам HTML будет вполне логичным шагом.

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

{3}-{3}

Квадратные скобки в начале строки определяют диапазон допустимых символов. Иными словами, группа разрешает любые прописные буквы от А до Z. Следующая за ней часть в фигурных скобках указывает множитель, т.е. {3} означает, что нужны три прописные буквы. Следующее тире не имеет никакого специального значения и означает самое себя, т.е. указывает, что после трех прописных букв должно быть тире. Наконец, обозначает цифры в диапазоне от 0 до 9, а {3} требует три таких цифры.

Регулярные выражения полезны для поиска в тексте строк, отвечающих условиям, заданных в выражении, и проверки, что определенная строка отвечает заданному регулярным выражением шаблону. В формах HTML5 регулярные выражения применяются для валидации.

Для обозначения начала и конца значения в поле символы ^ и $, соответственно, не требуются. HTML5 автоматически предполагает наличие этих двух символов. Это означает, что значение в поле должно полностью совпасть с регулярным выражением, чтобы его можно было считать корректным.

Таким образом следующие значения будут допустимыми для этого регулярного выражения:

QDR-001
WES-205
LOG-104

А вот эти нет:

qdr-001
TTT-0259
5SD-000

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

Чтобы применить полученное тем или иным путем регулярное выражение для проверки значения поля <input> или <textarea>, его следует добавить в этот элемент в качестве значения атрибута pattern:

Регулярные выражения кажутся идеальным средством для проверки правильности адресов электронной почты. Впрочем, не кажутся, а так оно и есть. Но подождите немного с использованием их таким образом, т.к. в HTML5 уже имеется выделенный тип для адресов электронной почты со встроенным в него регулярным выражением (будет рассмотрен в следующей статье).

Как проверить сайт на валидность

Для проверки безукоризненности кода чаще всего используют очень полезный сайт валидатор «Markup Validation Service», расположенный по адресу: http://validator.w3.org, созданный компанией W3C.

HTML

Здесь перед Вами три варианта валидации:

• ввести URL-адрес страницы;
• загрузить файл с кодом со своего компьютера;
• вставить готовый код в форму.

Сервис указывает не только на ошибки html кода и их расположение, но и даёт советы по исправлению. Если код уже имеется в Сети, то можно произвести валидацию путём введения её URL-адреса в форму «Validate by URL» и нажатия кнопки Check. Валидатор HTML включит считывание кода и сообщит об итогах.

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

В этом видео наглядно объяснён процесс проверки с помощью валидатора:

Проверка локальных файлов

По этому же адресу http://validator.w3.org можно проверить код, выбрав вкладку «Validate by File Upload» и загрузив документ с прописанным код.

Выбираем путь к необходимому файлу и жмём Check. Далее всё происходит аналогично.

Использование формы для ввода кода

Иногда удобней вставить сразу код страницы и проверить его онлайн: выбираем вкладку «Validate by Direct Input» и отправляем весь код на сервер.

CSS

Проверка валидности кода CSS может быть пройдена также онлайн валидатором: https://jigsaw.w3.org/css-validator/

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

Снова можно выбрать — указать URL, загрузить свой файл или вставить код.

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

Пример:

Изучаем полученный код и приводим исходный к нужному виду.

Расширения для браузеров

Для браузеров существуют всевозможные расширения для проверки валидации. Для Google Chrome есть проверяющий валидность кода плагин HTML Tidy Browser Extension, для Opera — расширение Validator, для Safari — Zappatic, для Firefor — HTML Validator.

Остановимся на последнем более детально. Он осуществляет ту же проверку, что и validator, только оффлайн. Взять его можно здесь http://users.skynet.be/mgueury/mozilla/

Устанавливаем расширение, перезагружаем браузер — и можно сразу работать. В случае возникновения заморочек с установкой, можно написать в саппорт Mozilla Firefox или полистать форум http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Подробное видео об установке HTML Validator и его использовании:

При загрузке любого URL расширение автоматически включается и считывает код. Результат виден в правом верхнем углу.

Выглядит результат как небольшая картинка с итогом валидации:

Щёлкнув по результату, можно открыть:
— исходный код;
— ошибки — в левом нижнем блоке (или сообщение о валидности);
— подсказки по исправлению ошибок — в правом нижнем.