Pure CSS3 achieves good form validation effects

This is a series of content that supplements the basic knowledge of HTML5, the others are:

• 1. HTML5--New structural elements

• 2. HTML5-- figure, time, details, mark

• ##3. HTML5-- details Learn and use

• 4. HTML5--Changes in existing elements

• 5. HTML5--Web forms

---

Today Continue to learn about Web forms, but today we will focus on practical implementation, using HTML5 forms and CSS3-UI to achieve a good form effect.

The effect can be seen in the following animation:

As an effect demonstration, we can achieve it with a few simple lines of CSS today.

Preliminary knowledge

• 1. HTML5

  New form types: tel, email, url (previous article There is Introduction)

• 2. Basic verification of HTML5 form:

  requiredAttribute

• 3. HTML5 form self-definition

  Validation rules: pattern attribute

Main introduction content

1. CSS3 User
• Interface

  Pseudo-class in the module##2. Custom error message

• Text

Since it is a form, we must have a basic form HTML structure. The following is the structure I created. All three forms are required fields, and for

tel## In the # column, we set a custom validation rule: it must be an Pure CSS3 achieves good form validation effects-digit number.

<pre class="sourceCode html">&lt;form&gt; &lt;ol&gt; &lt;li&gt; &lt;label for=&quot;tel&quot;&gt;Tel:&lt;/label&gt; &lt;input type=&quot;tel&quot; required name=&quot;&quot; pattern=&quot;\d{Pure CSS3 achieves good form validation effects}&quot; id=&quot;tel&quot;&gt; &lt;/li&gt; &lt;li&gt; &lt;label for=&quot;url&quot;&gt;Website:&lt;/label&gt; &lt;input type=&quot;url&quot; required name=&quot;&quot; id=&quot;url&quot;&gt; &lt;/li&gt; &lt;li&gt; &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt; &lt;input type=&quot;email&quot; required name=&quot;&quot; id=&quot;email&quot;&gt; &lt;/li&gt; &lt;li&gt; &lt;input type=&quot;submit&quot; name=&quot;&quot; value=&quot;Send the form&quot;&gt; &lt;/li&gt; &lt;/ol&gt;&lt;/form&gt;</pre>The effect after creation is as follows. It feels very different from the effect we want. They have the same roots, the same HTML, but this one is so ugly.

Don’t worry, let’s dress it slowly.

Use simple rules below to beautify the form:

* {
    margin: 0;
    font: 13px tahoma, verdana, sans-serif;
    padding: 0;}ol {
    width: 400px;
    margin: 50px;}li {
    clear: both;
    list-style-type: none;
    margin: 0 0 10px;}li:nth-last-child(1) {
    text-align: center;}label {
    display: block;
    float: left;
    margin: 0 10px 0 0;
    padding: 5px;
    text-align: right;
    width: 100px;}input {
    border-radius: 5px;
    padding: 5px 5px 5px 30px;
    width: 155px;}input:focus {
    outline: none;}

Now the effect is very good, However, there is still some distance from our goal. Now we should consider what the input box should look like in each link of

Form Validation

. There are three situations in the above example:

1. When the input box is not activated

• 2. When the input box is activated (incorrect input)

• 3. Input box activation (correct input)

• In view of the above three situations, here are three descriptions:

1. When not activated, the required form displays an orange reminder

• 2. When activated, if the input is incorrect, the form displays a dark red reminder

• 3. When activated, if the input is correct, the form will be green and pass

• , followed by the changes of the three icons.

When we define the form

state

After the definition is completed, we actually already have an effect in mind, and the code is the tool# to achieve the effect. ##, let’s take a look at how to define it:

First, the input box is not activated. At this time, the status of the input box is invalid and required:

input:invalid:required {
    background-image: url('nor.png');
    box-shadow: 0 0 5px #f0bb18;
    border: 2px solid #f0bb18;}

The second is when the input box is activated, but the input has not been successful. At this time, the status of the input box is focus

and

invalid
:

input:focus:invalid {
    background-image: url('warn.png');
    box-shadow: 0 0 5px #b01212;
    border: 2px solid #b01212;}

Finally, when the input box is activated, the form input is successful. At this time, the input box status is valid

:

input:valid {
    background-image: url('suc.png');
    border: 2px solid #7ab526;}

Finally, modify the submit button

:

input[type="submit"] {
    background: #7ab526;
    border: none;
    box-shadow: 0 0 5px #7ab526;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    padding: 7px;
    width: 150px;}

How about it, it’s not bad.

I won’t introduce all the new CSS options here. More CSS options need to be explored. We only used a few to achieve such a good effect.

The pseudo-classes we use are as follows:

• :valid —— 表单元素在内容符合元素类型并验证通过后，获得该类

• :invalid —— 如果表单元素内容有误，它将获得该类

• :required —— 任何拥有required属性的表单元素应用了此类

其他拓展

1、不触发浏览器验证

如果你不希望浏览器为表单验证，使用noval<a href="http://www.php.cn/wiki/1261.html" target="_blank">idate</a>属性或formnovalidate属性可以关闭浏览器验证。

其中novalidate是表单form所具有的属性，提交表单时会忽略任何错误提示和空白域。

<form novalidate>
    ...</form>

formnovalidate是input元素的属性，可以为单个表单元素设置该属性。

<form>
    ...    <input type="submit" formnovalidate></form>

上述表单同样不会触发验证。

2、自定义错误提示内容

在上面的例子中可以看到，浏览器会对我们的表单进行验证，在这个过程中会弹出错误消息。而随着输入的不同，这些验证消息也是不一样的。

我们虽然不能更改提示框的样式，但我们可以使用JavaScript的<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>CustomValidity()函数修改错误文字：

<form>
    <input oninput="check()" type="tel" id="tel"></form><script>
    function check() {
        tel = document.querySelector(&#39;#tel&#39;);
        tel.setCustomValidity(&#39;请输入正确的Pure CSS3 achieves good form validation effects位电话号码&#39;);
    }</script>

那么，现在当我们输入的时候，提示内容就变成我们自定义的了：

现在还有一个问题，浏览器的提示是不一样的，为空时的提示和错误的提示文案不一样，这样我们应该怎么分开处理呢？

这时候就需要validity来查看当前的验证状态：

tel = document.querySelector('#tel');console.log( tel.validity )

如上图所示，当前验证状态为：customError，就是说用户自定义的验证失败，我们可以根据这些状态来动态的更新提示信息。如果最终验证成功，其中的valid将变为true。

function check( el ) {
    var validity = el.validity;
    if ( validity.valueMissing ) {
        el.setCustomValidity('该字段为必填内容');
    } else if ( validity.patternMismatch ) {
        el.setCustomValidity('输入内容不符合格式');
    } else {
        el.setCustomValidity('输入有误');
    }}

上述只是演示，实际场景时刻替换自己的提示内容。

最后，可以通过validationMessage来获取当前的错误提示信息：

console.log( el.validationMessage )// "请填写此字段。"

总结

在本次学习中做了一个简单且最常见的Demo，另外介绍了一些关于表单验证修饰的细节，虽然这些东西五年前就已经有了，但补充基础知识什么时候都不算晚。

今天学习了valid、invalid、required的使用，知识点虽小，但效果却不错，每次学习都有新发现，慢慢积累。

The above is the detailed content of Pure CSS3 achieves good form validation effects. For more information, please follow other related articles on the PHP Chinese website!