Why a valid code is needed and how to eliminate validation errors. Validation errors: what it is, how to check if it needs to be deleted, how it affects SEO Warface token validation error when replenishing an account

There is nothing more tedious than filling out a poorly written lead form on a landing page. Remember how many times you had to refill all the fields due to the fact that the password you came up with did not fit the system according to certain criteria, which no one tried to notify you about in advance.

Keep in mind that lead form optimization is a key component of the conversion optimization process and the focus here should be on field validation.

What is lead form validation?

Lead form validation is a technical process during which the system checks the correctness of the data entered by the user. If a person made a mistake when filling out the form (for example, he entered the data in the wrong format), the system will point out to him this error (or simply its presence) and offer to correct it. If the user entered all the data correctly, then no additional messages will appear (or a checkmark will appear next to the field), and he will proceed to the next stage of registration.

For example, Twitter will not allow you to proceed to the next registration step if you enter an email address in the wrong format:

When you enter the email address in the format that the system needs, a checkmark will appear next to the field, indicating that the format of the entered data is correct:

The essence of validation is to ensure that users enter data in the format required by the system (for example, the mail address must comply with the standard [email protected], but, for example, the password must contain at least 7 characters).

There are two main types of form validation.

Validation errors are errors in the code of the site pages, while errors on the main page and on the internal pages of the site may differ from each other. The site is considered valid if it has no errors in the code of the site pages. Errors can appear during site development, for example, when html tags are closed incorrectly or not closed at all, when obsolete tags are used, the document type is not set (), nesting of elements is incorrectly organized, and others. Some of the errors may be visible, and the user will be able to notice them when visiting the pages of the site, some of the errors may be hidden from view.

The most popular and proven validator, in our opinion, is validator.w3.org , it scans the site for errors in accordance with the standards adopted by the World Wide Web Consortium. This validator has 3 ways to check for errors: enter the URL of a specific page of your site, upload the site page file and enter the part of the site code that needs to be checked.

After completing the check, you will be presented with a list of errors on the page with a description of the error, the line number with the error, and which part of the line contains the error.

There is an error filtering function with which you can fix specific groups of errors in turn, in addition, for each error, a link is provided to the w3c standards, where you can find the cause of this error.

There are also plugins for browsers to find errors on the pages of the site.

http://users.skynet.be/mgueury/mozilla/ - plugin for Mozilla

https://chrome.google.com/webstore/detail/html-tidy-browser-extensi/ - plugin for Chrome

https://addons.opera.com/en/extensions/details/validator/ - plugin for Opera

After the site has been checked for errors, a quite reasonable question arises: do they need to be removed immediately and what does this mean for SEO promotion?

Search engines, when ranking sites in search results, still pay more attention to other aspects, such as internal site optimization, link profile, content. But validation should not be completely ignored either.

First of all, I recommend paying attention to errors related to the content, because. For search engines, this factor is important when ranking sites. If there are a lot of errors on the pages of the site (more than 25), then it is strongly recommended to eliminate errors in the code, because sites with a large number of errors take longer to load and are also harder to index, which can lead to the absence of part of the site's pages in the search engine index.

Let's analyze how many errors are present in the page code of large resources.

Russian Railways JSC:

As you have already noticed, even the sites search engines there are errors in the code of the pages, which once again confirms that the elimination of errors is rather advisory in nature, while it is worth mentioning that you should not neglect this factor and “launch” your site. Develop the site comprehensively, comprehensively, then the result will meet your expectations.

By the way, checking the site for errors that really affect the promotion takes place within the framework of SEO audit. If you doubt that you can adequately evaluate your site for errors, please contact us.

Validation is one of the most important aspects of good web design. Let's look at what it is and how to check HTML code for validity. As an example, let's take the most common content management system (CMS) - WordPress. After that, we will share a list of errors that we encountered in practice and, most importantly, we will offer our own, proven, methods for eliminating them.

Why is it necessary to check the validity of the site

Simply put, checking a web page will determine if it complies with the standards developed by the World Wide Web Consortium (W3C). This is usually done by checking individual pages for validity using the W3C's online validation service.

Just like grammar rules in different languages, there are also rules in programming. Validation allows you to see if the page complies with these rules, and if there are errors and warnings, recommendations will be provided to eliminate them. More details about the need for such a check will be discussed below.

What affects the validity of the site

Have you ever wondered how browsers "read" a web page? They have "engines" to analyze the code and convert it into a visual form for people. Unfortunately, each browser has its own code handling mechanism, and this can cause your pages to display differently.

An invalid web page can be read by browsers in different ways. This will result in your visitors possibly not even being able to see the content of the page correctly in their browsers. Validation will later correct almost all major differences and make your web page readable by almost all web browsers (most often the exception is internet explorer older versions). This is where the term “cross-browser layout” came from. layout that is equally good (compatible) for all popular browsers.

How will this affect SEO? It is important to understand that search engine bots love semantic web pages. Semantic layout, according to Wikipedia, is an approach to creating HTML web pages based on the use of HTML tags in accordance with their semantics (purpose). In addition, a structural semantic web page allows search robots to more accurately determine the significance of both individual elements of a web page and the entire text as a whole. According to Google, a valid code does not affect page ranking in any way. But at the same time, the presence of errors in the code can negatively affect the scanning of microdata and adaptability to mobile devices.

Verification tools for your site

Understanding the need for the absence of validation errors on the pages of the site, let's look at how to search for these errors.

There are many free website validation services such as W3C Markup Validation Service , Web Page Analyzer , Browsershots and others.

Validation is the validation of the values specified by the user and the display of the errors found.

Principles

The task of the designer is to make sure that the user does not make a mistake and validation is not needed, for this:

Limit the selection of obviously incorrect values in the list: block these values or do not show them in the list.
Limit the input of inappropriate characters. If a field requires only numbers to be entered and it is obvious to the user, ignore the letters instead of showing an error. Use wildcards in fields where the format is known to the values.
Write prompts to fill out the form. For example, a placeholder in input fields.

Validation on a newly opened empty form is prohibited. An exception is drafts, when the user has already filled out this form, after some time he returned to it, and it was filled with errors.

Types of validation

There are three types of validations: instant, on loss of focus, and on form submission.

The sooner the interface reports an error, the better - it's easier for the user to go back and fix the error.

Most fast way report a bug - instant validation. But it is possible only in those cases when it is clear during the input process that the value is incorrect. Typically, such errors are associated with an incorrect keyboard layout (Cyrillic instead of Latin) or entering letters in a numeric field (TIN, KPP, etc.). For these cases, we use fields with masks: entering inappropriate characters in them is blocked. Therefore, our interfaces have only two types of validation:

by loss of focus- the main type of validation
on form submission- for those cases when validation by loss of focus is not possible.

Focus Loss Validation

When to use

How does it work

Don't validate fields to be empty on loss of focus - don't show an error if the field is empty, the user may come back and fill in the field a bit later. In such cases, you can show an error only after submitting the form.

Validation is triggered immediately after the loss of focus, if the value in the field is filled. If an error is found, the field is highlighted in red. Focus is not automatically returned to this field:

The error text appears in the tooltip when the field is hovered or focused:

A field with an error should remain highlighted if it received focus, its value was not corrected, and then it lost focus.

The red highlight is removed from the field as soon as the user has started to correct the erroneous value.

Form submission validation

When to use

Use this kind of validation when you can't validate fields on loss of focus. For example, to check if required fields are filled in.

How does it work

The check occurs after the user has pressed the submit data button: all fields with errors on the form are highlighted, the page scrolls to the first field with an error, the focus moves to this field, the cursor moves to the end of the line, a tooltip with a hint appears next to the field.

Scrolling to the first field from the top border of the window to the erroneous field leaves an indent of 48px - six units.

Blocking the submit button

In small forms, instead of checking the required fields, you can block the submit button of the form. Use this behavior when it's obvious why the form's submit button is disabled. For example, on the login form:

As soon as all required fields are filled in, the button becomes active. If after that the user erased the value in one of the fields, the button should become inactive again.

Error messages

Errors can be reported in two ways:

Tooltips

How they work

The hint tooltip appears in two cases:

When hovering over a field with an error.
When the field with the error gets focus.

If the value in the field with the error was changed, lost focus, and then got the focus again, the tooltip with the text of the old error no longer appears. This rule works the same for all types of validations: both on loss of focus and on form submission.

The hover tooltip overrides the focus tooltip.

The tooltip can appear on top or to the right of the control with an error, so that it does not overlap useful information:

Uniform behavior and appearance

Show tooltips to the right of fields. If in this case they overlap important content on the page, display the tooltips at the top. Stick to consistency, but remember content is more important than content.

Red texts on the page

How they work

The red error text appears as soon as the validation has occurred and the erroneous field is highlighted.

As soon as the user starts correcting the value, the red highlight of the field disappears and the color of the error text changes to -  #333.

The error text disappears when focus is lost, and does not reappear when the field gains focus again. This rule works the same for all types of validations: both on loss of focus and on form submission.

Display the error text on the right if there is space on the form and the message itself is short. This way the form doesn't have to be expanded to show the error.

If there is no room for text to the right of the field, expand the form and display the message below the field.

On more complex forms, display an error message in the tooltip.

Validation of dependent fields

Dependent fields are fields whose value depends on each other.

Errors that are related to field dependency violations are shown after form submission. For example, TIN and KPP. If the user specified a TIN of 10 digits, and left the field with the checkpoint empty, after submitting the form, the empty field with the checkpoint will be highlighted.

TIN can be of two types:

10-digit for legal entities
12-digit IP.

If the user indicated a TIN of 12 digits, then the organization is an individual entrepreneur, and it does not have a checkpoint, so the checkpoint field does not need to be filled in. And vice versa, if the checkpoint is filled in, and the TIN is 12-digit, the TIN may be incorrectly indicated.

The highlighting of dependent fields disappears as soon as the user starts to correct the value in one of these fields.

If the value format is violated when filling in a dependent field, report such an error when focus is lost. For example, the user entered 3 digits in the TIN field and removed the focus. This field should be highlighted immediately.

Example

There is a form with 5 fields:

Name of the organization- plain text, required
TIN- 10 or 12 digits, checksum on loss of focus, mandatory
checkpoint- 9 digits with checksum check on loss of focus, mandatory if TIN consists of 10 digits
Email- mail address, check for loss of focus by mask [email protected], optional
Telephone- international format, check for loss of focus by mask +00000000000, mandatory