Задержка HTML5: недопустимый псевдокласс до первого события
Я недавно обнаружил что :invalid псевдокласс относится required элементы формы, как только страница загружается. Например, если у Вас есть этот код:
<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />
Затем Ваша страница загрузится с пустым розовым входным элементом на нем. Встраивание проверки к HTML5 является большим, но я не думаю, что большинство пользователей ожидает, что форма проверит, прежде чем у них был шанс ввести любые значения вообще. Там какой-либо путь состоит в том, чтобы задержать приложение псевдокласса до первого события, влияющего на тот элемент (форма отправляют, размываются, изменяются, независимо от того, что является соответствующим)? Действительно ли возможно сделать это без JavaScript?
3 ответа
Это - VanillaJS (никакой jQuery) версия ответ kzh
{
let f = function() {
this.classList.add('touched')
}
document
.querySelectorAll('input')
.forEach((e) => {
e.addEventListener('blur', f, false)
e.addEventListener('keydown', f, false)
})
}/**
* All required inputs initially are yellow.
*/
:required {
background-color: lightyellow;
}
/**
* If a required input has been touched and is valid, it should be white.
*/
.touched:required:valid {
background-color: white;
}
/**
* If a required input has been touched and is invalid, it should be pink.
*/
.touched:required:invalid {
background-color: pink;
}<p><label>
Name:
<input type="text" required> *required
</label></p>
<p><label>Age:
<input type="text">
</label></p>Я не могу прокомментировать, но пойти с очень полезным ответом @Carl относительно использования: не (: показанный заполнителем). Как другой упомянутый комментарий, это все еще покажет недопустимое состояние, если у Вас не будет заполнителя (как некоторый призыв проектов формы).
Для решения этого просто добавьте пустого заполнителя как так
<input type="text" name="username" placeholder=" " required>
Затем CSS, что-то как
:not(:placeholder-shown):invalid{ background-color: #ff000038; }
Работавший для меня!
Следуя идея agouseh , у Вас может быть немного JavaScript для сообщения, когда кнопка отправки была сфокусирована и имеет проверку, обнаруживаются в то время.
JavaScript добавит класс (например, submit-focussed) к полю формы, когда кнопка отправки будет сфокусирована или нажата, который затем позволяет CSS разрабатывать недопустимые исходные данные.
Это следует лучшей практике показа обратной связи проверки после того, как пользователь закончил заполнять поля, как согласно исследованию нет никакой дополнительной выгоды для показа его во время процесса.
document
.querySelector('input[type=submit]')
.onfocus = function() {
this
.closest('form')
.classList
.add('submit-focussed');
};form.submit-focussed input:invalid {
border: thin solid red;
}<form>
<label>Email <input type="email" required="" /></label>
<input type="submit" />
</form>альтернатива jQuery
(function($) {
$('input[type=submit]').on('focus', function() {
$(this)
.parent('form')
.addClass('submit-focussed');
});
})(jQuery); /* WordPress compatible */