Simple form validation without JS

In this article I would like to share the method of quick field validation using markup and styles. This method is not cross-browser and is recommended for use only as an additional feature. In the course of the article, we will reduce our chances of cross-browser compatibility, but increase functionality.

Let's try to put together a standard form that will include: Name, E-Mail, Phone, Link to the site and let's say your height, to experiment with a numeric field.

<form action="#" class="form"> <input type="text" name="name" placeholder="" /> <input type="text" name="email" placeholder="E-Mail" /> <input type="text" name="phone" placeholder="" /> <input type="text" name="url" placeholder=" " /> <input type="text" name="growth" placeholder=" " /> <button type="submit"></button> </form> 

HTML5

Now, no one is surprised by the attributes of validation of input fields, which was brought to us by the HTML5 standard. However, we will not bypass it - this validation method is the most supported in modern browsers.

The easiest way to validate is to define the type of input field and set the required attributes that are responsible for the mandatory filling.
')

 <form action="#" class="form"> <input type="text" name="name" placeholder="" required /> <input type="email" name="email" placeholder="E-Mail" /> <input type="tel" name="phone" placeholder="" /> <input type="url" name="url" placeholder=" " /> <input type="number" name="growth" placeholder=" " /> <button type="submit"></button> </form> 

The use of these two attributes will make it much more efficient to validate the entered information using native methods. And of course, browsers support these properties most broadly.

Separately, I would like to say about the field type tel . It is expected that the browser will validate phone numbers, but no, the field with the type tel is now used only for auto-completion. The fact is that validation of telephone numbers is a very ambiguous task due to too many different phone number formats in different countries, which simply cannot be unified and written into one rule.

However, the pattern attribute comes to the rescue. This attribute takes the value of a regular expression. In our case, we consider a variant of the pattern for entering a mobile phone in the Russian Federation: +7 (123) 456-78-91 . To do this, add a simple regular expression to our field with a phone, and also limit the minimum and maximum number of characters:

 <input type="tel" name="phone" placeholder="" pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}" minlength="18" maxlength="18" /> 

Usually I use this pattern in conjunction with a mask to enter the number, but unfortunately there is no way to do without JS for now. If you don’t use a mask, I wouldn’t use patterns on phone input, as this will in most cases cause more inconvenience to the user.

Browser support for the pattern attribute is currently very good. iOS, starting from version 10.3, fully supports this property, until then there was a lack of prompts about incorrect data entry.

It should also be borne in mind that the minlength attribute is still not supported in IE, EDGE browsers, and only since version 10.3 has it appeared in iOS. However, maxlength is supported everywhere and a long time ago. We generally have enough of this.

Let's also put a limit on the field with growth. Suppose we assume that the user of our site definitely cannot be lower than 100 cm and higher than 250 cm. And we will write:

 <input type="number" name="growth" placeholder=" " min="100" max="250" /> 

With the support of these attributes in browsers, all is well.

Let's go to the stylization!

CSS3

In order to customize our validation, we use the pseudo-classes : invalid and : valid . Support for these pseudo-classes in browsers allows you to use them as widely as possible at the moment.

 input:invalid {border-color: red;} input:valid {border-color: green;} 

It would seem, we take the acquired knowledge and apply! But not everything is as simple as it seems, let's check how it works. As a result, we get that all our fields are initially empty and mandatory will not be considered valid, and all the others are valid. It’s not at all beautiful and incomprehensible to the user what they want from him.

We can go for a little trick and use the pseudo -class: placeholder-shown . Using this pseudo-class, we can determine whether the placeholder value is currently displayed in our input field. The placeholder attribute is displayed only when nothing is entered in our field. Accordingly, in order to apply this pseudo-class, we simply need to invert its property with the help : not . As a result, we obtain the following structure:

 input:invalid:not(:placeholder-shown) {border-color: red;} input:valid:not(:placeholder-shown) {border-color: green;} 

If you read verbatim: paint in red the input boundary when our field is not valid and when the value of the placeholder attribute is not displayed in it. If your field does not have a placeholder attribute, you can simply put a space inside:

 <input type="text" placeholder=" " /> 

This method has only one drawback: support. Pseudo-element: placeholder-shown is supported in all browsers except IE and EDGE. Fortunately: not does not have such a disadvantage.

For example, I sketched all of the above in CodePen and added some more features:

Total

Thus, without resorting to JS, we were able to stylize and validate the form using two lines in CSS. At the moment, this design will work well in most browsers, unfortunately, as always, web development is being brought up by the Microsoft brainchild.