Pure CSS to implement form validation_html/css_WEB-ITnose

Ladies and folks, are you doing form validation? Client or server, javascript or jquery, handwriting or using plug-ins, today we will explore using pure css to implement form validation, so as to learn the form-related pseudo-class selectors in css selectors level 4.

Case appreciation

I have also put the code in codepen, you can study it online, or download it for collection.

Knowledge Analysis

The key is to use some pseudo-classes in css selectors levle4 to implement form validation. These pseudo-classes are:

:required and:optional

:in-range and out-of-range

:valid and:invalid

:read-only and:read-write

The above case uses: in-range and :out-of-range, let’s explain them one by one.

:required and :optional

:required can select form elements with the required attribute, which can be input, select, and textarea. For example, the following elements will be selected.

<input type="name" required><input type="checkbox" required><input type="email" required><!-- and other input types as well.. --><textarea name="name" id="message" cols="30" rows="10" required></textarea><select name="nm" id="sel" required>    <!-- options --></select>

:optional selects form elements that do not have the required attribute. Using these two pseudo-classes, we can achieve the following interesting effect. The code is also placed in codepen. You can research it online or download it for collection. It’s up to you.

This code mainly uses two pseudo-classes: required and :optional to implement different styles and different prompt texts for the required and optional forms. The core code is shown below.

/*可选表单样式*/input:optional,select:optional { border-right: 3px solid #888; background-color: #f8f8f8; color: #888; }/*必选表单样式*/input:required,textarea:required { border-right: 3px solid #aa0088; }/*可选表单提示文字*/input:optional+label::after{ content:"(可选)"; }/*必选表单提示文字*/input:required+label::after{ content:"(必填)"; }/*可选表单激活效果*/input:optional:focus,select:optional:focus { box-shadow: 0 0 2px 1px #aaa; }/*必选表单激活效果*/input:required:focus,select:required:focus,textarea:required:focus { outline: 0; box-shadow: 0 0 2px 1px #aa0088; }

:in-range and out-of-range

These two pseudo-classes respectively select the form attribute value in the range and out-of-range states. These two pseudo-classes Can be used on elements that accept a range of numbers, such as forms or sliders of type number. The case effect is shown in the "Case Appreciation" section above. We only show the core code here to help everyone understand the use of the two pseudo-classes.

input:out-of-range{ border: 1px solid tomato; }input:in-range~ label::after { content: "输入一个正确的从1到10的数字"; }input:out-of-range ~ label::after { content: "枣糕，你傻了！"; }

:valid and :invalid

These two pseudo-classes are designed for input forms with type. For example, if there is a form with type=email, when its value is not a valid email address Triggered when the format is: invalid pseudo-class, triggered when the value is a valid email format: valid pseudo-class.

Similarly, it is placed in codepen, please study online or download the collection, and then we will take a look at the core code, as shown below.

input:invalid{ border: 1px solid tomato; }input:valid~ label::after { content: "耶，一个邮箱！"; }input:invalid ~ label::after { content: "枣糕，邮箱邮箱，是邮箱吗？"; }

:read-only and :read-write

The following elements can activate the :read-only pseudo-class.

A form with the disabled attribute

A text-area with a read-only or disbaled attribute

Any other element that does not have a contenteditable attribute specified

For example, below The elements shown in the code can activate the :read-only pseudo-class selector.

<input type="text" disabled><input type="number" disabled><input type="number" readonly><textarea name="nm" id="id" cols="30" rows="10" readonly> </textarea><div class="random"> </div> <!-- regular element that is not editable with contenteditable -->

: The read-write element is exactly the opposite of the :read-only element.
This is relatively simple, so I won’t do a case anymore. Thanks.

In-depth reading

Codrops CSS Reference

CSS Selectors Level 4

a lightning fast, cross-browser CSS 3 & 4 selector engine for JavaScript

Browser CSS-Selector-Test

Acknowledgments