Skip to content

Commit

Permalink
focus
Browse files Browse the repository at this point in the history
  • Loading branch information
Ayronhayd committed Sep 2, 2024
1 parent 4c62122 commit 3d3443d
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 6 deletions.
3 changes: 1 addition & 2 deletions source/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateAdvSlider } from './modules/swiper-adv';
import { toggleSwiper } from './modules/toggle-swiper';
import { activateGallerySlider } from './modules/swiper-gallery';
import { toggleMenu } from './modules/menu';
import { formValid } from './modules/form-valid';


closePressing();
activateHeroSlider();
Expand All @@ -27,4 +27,3 @@ window.onresize = function() {
toggleSwiper();
};

formValid();
78 changes: 78 additions & 0 deletions source/js/modules/form-valid.js
Original file line number Diff line number Diff line change
@@ -1 +1,79 @@
const validateForm = () => {
const form = document.querySelector('form');
const phoneInput = document.querySelector('input[type="tel"]');
const emailInput = document.querySelector('input[type="email"]');

if (form && phoneInput && emailInput) {
const inputs = form.querySelectorAll('input');
const digitsOnlyRegex = /^\d+$/;
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$|^[a-zA-Z0-9._%+-]+@[а-яА-ЯёЁ0-9.-]+\.[рф]{2,3}$/;

const toggleError = (input, show) => {
const parent = input.parentElement;
parent.classList.toggle('error', show);
input.classList.toggle('error', show);
};

const validateInput = (input, regex) => {
const value = input.value.trim();
toggleError(input, value === '' || !regex.test(value));
};

form.addEventListener('submit', (event) => {
let isValid = true;

inputs.forEach((input) => {
if (input.value.trim() === '') {
isValid = false;
toggleError(input, true);
} else {
if (input.name === 'phone') {
validateInput(input, digitsOnlyRegex);
}
if (input.name === 'email') {
validateInput(input, emailRegex);
}
if (input.classList.contains('error')) {
isValid = false;
}
}
});

if (!isValid) {
event.preventDefault();
}
});

inputs.forEach((input) => {
const label = input.previousElementSibling;

input.addEventListener('focus', () => {
if (label && label.tagName.toLowerCase() === 'label') {
label.style.display = 'none';
}
input.classList.add('show-placeholder');
toggleError(input, false);
});

input.addEventListener('blur', () => {
if (label && label.tagName.toLowerCase() === 'label' && input.value.trim() === '') {
label.style.display = 'block';
}
input.classList.remove('show-placeholder');
});

input.addEventListener('input', () => {
if (label && label.tagName.toLowerCase() === 'label') {
label.style.display = input.value.trim() === '' && document.activeElement !== input ? 'block' : 'none';
}
});

if (label && label.tagName.toLowerCase() === 'label' && input.value.trim() !== '') {
label.style.display = 'none';
}
});
}
};

export { validateForm };

14 changes: 10 additions & 4 deletions source/sass/blocks/form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -153,14 +153,20 @@
}
}

.form__input:focus + .form__label {
input:focus + label,
input:not(:placeholder-shown) + label {
display: none;
color: transparent;
}

.form__input:active + .form__label {

.form__input:focus + label,
.form__input:required:valid + label {
display: none;
}

.form__label:focus + label,
.form__label:required:valid + label {
display: none;
color: transparent;
}


Expand Down

0 comments on commit 3d3443d

Please sign in to comment.