Блог

Главная - Вопросы по программированию - Как управлять внешним видом пользовательской проверки HTML с помощью Javascript?

Как управлять внешним видом пользовательской проверки HTML с помощью Javascript?

#javascript #html #validation

#javascript #HTML #проверка

Вопрос:

Как можно настроить стиль обратной связи проверки в JavaScript или использовать speechbubbelish?

Я покажу два примера:

Проверка 1

Проверка 2

Я хотел бы, чтобы проверка отображалась на втором скриншоте аналогично первому (а не только появлялась при наведении курсора мыши). Что привело меня к отзывам на втором скриншоте:

 <input id="MyInputField" type=text required></input>

function setCustomVal() {
    let field = document.getElementById("MyInputField");
    field.setCustomValidity("User Feedback");
}

это не совсем тот код, из которого я сделал снимок экрана, но это было достигнуто тем же способом.

я хотел бы предоставить пользовательский отзыв пользователя о проверке, как на первом рисунке.

Ответ №1:

Более идеальным будет использовать стороннюю библиотеку под названиемpopper.js , они предоставляют хорошую документацию по оформлению всплывающих окон / подсказок. Тем не менее, вам нужно применить новые методы проверки вручную вместо использования требуемого атрибута.

 var popper = new Popper(referenceElement, onPopper, {
    placement: 'bottom'
});

Комментарии:

1. спасибо, я думаю, я мог бы добиться достойной обратной связи по проверке с помощью предлагаемой библиотеки popper.js . Тем не менее, я бы предпочел использовать встроенное решение для минимизации зависимостей. Очевидно, что это каким-то образом встроено в HTML5, но я не могу запустить его через JavaScript, это правильно?

2. На данный момент да, вы не можете запустить его вручную с помощью javascript, если в поле ввода нет обязательного поля, а поле ввода пустое, поэтому многие библиотеки, такие как popper, созданы для решения этой проблемы