Валидация формы на CSS

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <form action="login.html" invalid>
        <div class="item">
          <input
            type="email"
            placeholder="asd@mail.ru"
            pattern="^[^@\s]+@[^@\s]+\.(ru|com)$"
            required
          />
          <span>Не верный email</span>
        </div>
        <div class="item">
          <input
            type="password"
            placeholder="password"
            minlength="6"
            required
          />
          <span>Не верный пароль</span>
        </div>
        <button type="submit">Отправить</button>
      </form>
    </div>
  </body>
</html>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
  background-color: white;
}
.wrapper {
  padding: 40px;
}
form input {
  padding: 10px;
  border: 1px solid #ddd;
}
form .item {
  margin: 0 0 10px;
}
form input:invalid:not(:placeholder-shown) {
  border: 1px solid #f00;
}
form input:valid:not(:placeholder-shown) {
  border: 1px solid #ddd;
}
form input:invalid:not(:placeholder-shown) + span {
  color: #f00;
}
form:invalid button {
  pointer-events: none;
  opacity: 0.5;
}
form:valid button {
  pointer-events: auto;
  opacity: 1;
}