валидация js колесо

219
16 апреля 2022, 22:00
<form class="main-order__form js-form">
<img class="gifts" src="img/gifts.png" />
<div class="main-order__inp inp -phone js-form__inp">
<input type="tel" name="phone" id="popup-callback-phone" class="mask-phone" placeholder="+7 (___) ___-__-__" required>

есть такая форма, и само колесо

    (function() {
const wheel = document.querySelector('.wheel');
const startButton = document.querySelector('.btn1');
let deg = 0;
startButton.addEventListener('click', () => {
startButton.style.pointerEvents = 'none';
deg = Math.floor(1000 + Math.random() * 150);
wheel.style.transition = 'all 10s ease-out';
wheel.style.transform = `rotate(${deg}deg)`;
wheel.classList.add('blur');
});
wheel.addEventListener('transitionend', () => {
wheel.classList.remove('blur');
startButton.style.pointerEvents = 'auto';
wheel.style.transition = 'none';
const actualDeg = deg % 360;
wheel.style.transform = `rotate(${actualDeg}deg)`;
});
})();

как сделать валидацию что если форма не заполнена колесо не крутится ? а если заполнена то крутится

Answer 1

Вам можно в коде получить ссылку на инпут, а затем проверять его валидность через input.checkValidity():

...
const input = document.querySelector('#popup-callback-phone');
startButton.addEventListener('click', () => {
    if (input.checkValidity()) {
        startButton.style.pointerEvents = 'none';
        deg = Math.floor(1000 + Math.random() * 150);
        wheel.style.transition = 'all 10s ease-out';
        wheel.style.transform = `rotate(${deg}deg)`;
        wheel.classList.add('blur');
    };
});
...

Если хотите дать колесу специальные стили в случае инвэлида инпута, используйте, например, псевдоклассы :valid/:invalid

READ ALSO
Как проверить fetch на успех?
javascript

Как проверить fetch на успех?

Подскажите в чем может быть проблема

 96
В javascript е функция не меняет переменную
javascript

В javascript е функция не меняет переменную

Здравствуйте есть две функции

 121
Почему не работает делегирование?
javascript

Почему не работает делегирование?

Изучаю тему по учебникуВ нем есть пример, который работает в сэндбоксе

 135
Где хранить service worker?
javascript

Где хранить service worker?

Загорелся идеей добавить service worker при помощи workbox в существующий проект на WordPress, но столкнулся с одной проблемой: где его расположить и как...

 113