diff --git a/assets/css/registration.css b/assets/css/registration.css index d9076d6..542a763 100644 --- a/assets/css/registration.css +++ b/assets/css/registration.css @@ -47,8 +47,31 @@ button { outline: none; font-size: 16px; font-weight: bold; + transition: background-color 0.3s; } -button:hover { +button:hover, +button:focus-visible { background-color: #007bb5; } + +.hide-cursor::placeholder { + color: #000; +} + +.hide-cursor { + caret-color: transparent; +} + +.no-select { + -webkit-user-select: none; /* Для Safari */ + -moz-user-select: none; /* Для Firefox */ + user-select: none; /* Для всех остальных браузеров */ +} + +div { + color: red; + font-size: 15px; + margin-top: 10px; + display: none; +} diff --git a/assets/html/registration.html b/assets/html/registration.html index 5cd0bed..c196ad8 100644 --- a/assets/html/registration.html +++ b/assets/html/registration.html @@ -4,20 +4,22 @@ Страница Регистрации - + - -
-

Вход

-
-
-
-
- -
-
- + +
+

Вход

+
+
+
+
+ +
+
+
+ + diff --git a/assets/js/registration.js b/assets/js/registration.js index 902c847..dc27d59 100644 --- a/assets/js/registration.js +++ b/assets/js/registration.js @@ -1,16 +1,50 @@ document.addEventListener('DOMContentLoaded', function() { - const form = document.querySelector('form'); - form.addEventListener('keydown', function(event) { - if (event.key === 'Enter') { + const form = document.querySelector('form'); + const submitButton = form.querySelector('button[type="submit"]'); + const errorElement = document.getElementById('error'); + + form.addEventListener('keydown', function(event) { const activeElement = document.activeElement; - if (activeElement.tagName === 'INPUT' && activeElement.type !== 'submit') { - event.preventDefault(); - const formElements = Array.from(form.elements); - const currentIndex = formElements.indexOf(activeElement); - if (currentIndex !== -1 && formElements[currentIndex + 1]) { - formElements[currentIndex + 1].focus(); + const formElements = Array.from(form.elements); + const currentIndex = formElements.indexOf(activeElement); + + if (activeElement.tagName === 'INPUT') { + if (event.key === 'Enter') { + event.preventDefault(); + if (currentIndex === formElements.length - 1) { + submitButton.focus(); + } else if (currentIndex !== -1 && formElements[currentIndex + 1]) { + formElements[currentIndex + 1].focus(); + } } } + }); + + submitButton.addEventListener('focus', function() { + submitButton.classList.add('focus-visible'); + }); + + submitButton.addEventListener('blur', function() { + submitButton.classList.remove('focus-visible'); + }); + + form.addEventListener('submit', function(event) { + if (!validateForm()) { + event.preventDefault(); + } + }); + + function validateForm() { + const username = document.getElementById('username').value.trim(); + const login = document.getElementById('login').value.trim(); + const password = document.getElementById('password').value.trim(); + + if (username === '' || login === '' || password === '') { + errorElement.textContent = 'Пожалуйста, заполните все поля'; + errorElement.style.display = 'block'; + return false; + } + + return true; } }); -});