Как сделать что бы при нажатие на кнопку была проверка все ли нажаты радио батны, если что то не нажато к ней плавно подъехать(к самой верхней), с отступом в 60 пикселей и выделить каким нибудь цветом что они не выбраны.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Radio Button</title>
<style>
.test{
height: 2000px;
}
.test2{
height: 200px;
}
</style>
</head>
<body>
<form>
<input type="radio">
<div class="test2"></div>
<input type="radio">
<div class="test2"></div>
<input type="radio">
<div class="test"></div>
<button type="submit">Submit</button>
</form>
<script>
const form = document.querySelector('form');
const input = document.querySelector('input[type="radio"]');
form.addEventListener('submit', (event) => {
if (!input.checked) {
event.preventDefault();
input.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest',
});
input.style.marginTop = '60px';
}
});
</script>
</body>
</html>