Frontend Interview - собеседования по Javascript / Html / Css

0:15

This media is not supported in your browser

VIEW IN TELEGRAM

Визуальные подсказки для проверки формы

Используя только CSS, вы можете отображать для пользователей визуальные подсказки относительно правильности ввода, введенного в формы. Мы можем использовать псевдоклассы CSS :valid и :invalid к элементам формы, чтобы применять соответствующие стили, когда их содержимое проверяется успешно или нет.

<input
    type="text"
    pattern="([a-zA-Z0-9]\s?)+"
    placeholder="Enter full name"
    required
/>
<span></span>

<span> будет использоваться для отображения результатов проверки.
А приведенный ниже CSS стилизует входные данные относительно результата проверки:

input + span {
    position: relative;
}

input + span::before {
    position: absolute;
    right: -20px;
    bottom: 0;
}

input:not(:placeholder-shown):invalid {
    border: 2px solid red;
}

input:not(:placeholder-shown):invalid + span::before {
    content: "✖️";
    color: red;
}

input:not(:placeholder-shown):valid + span::before {
    content: "✓";
    color: green;
}

👉 @frontendInterview

www.tgoop.com/frontendInterview/4059

1.6K viewsOct 22, 2024 at 18:00

Визуальные подсказки для проверки формы

Используя только CSS, вы можете отображать для пользователей визуальные подсказки относительно правильности ввода, введенного в формы. Мы можем использовать псевдоклассы CSS :valid и :invalid к элементам формы, чтобы применять соответствующие стили, когда их содержимое проверяется успешно или нет.

<input
    type="text"
    pattern="([a-zA-Z0-9]\s?)+"
    placeholder="Enter full name"
    required
/>
<span></span>

input + span {
    position: relative;
}

input + span::before {
    position: absolute;
    right: -20px;
    bottom: 0;
}

input:not(:placeholder-shown):invalid {
    border: 2px solid red;
}

input:not(:placeholder-shown):invalid + span::before {
    content: "✖️";
    color: red;
}

input:not(:placeholder-shown):valid + span::before {
    content: "✓";
    color: green;
}

BY Frontend Interview - собеседования по Javascript / Html / Css