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

Question

<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

БЛОГ НА HUSL

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

Ответы (1 шт):