Пробую ещё раз залить, т.к. прошлый раз залилось с ошибкой
This commit is contained in:
a.gruzdev
+308
@@ -0,0 +1,308 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const nameInput = document.getElementById('name');
|
||||
const phoneInput = document.getElementById('phone');
|
||||
const emailInput = document.getElementById('email');
|
||||
const vkInput = document.getElementById('vk');
|
||||
const agreeOfertaInput = document.getElementById('agreeOferta');
|
||||
const agreePolicyInput = document.getElementById('agreePolicy');
|
||||
const agreeNewsletterInput = document.getElementById('agreeNewsletter');
|
||||
|
||||
const form = document.getElementById('ikpForm');
|
||||
const formContainer = document.getElementById('formContainer');
|
||||
const successContainer = document.getElementById('successContainer');
|
||||
const resetBtn = document.getElementById('resetBtn');
|
||||
|
||||
// List of fields to manage focus and validation state
|
||||
const fields = [
|
||||
{ input: nameInput, check: checkName, dirty: false },
|
||||
{ input: phoneInput, check: checkPhone, dirty: false },
|
||||
{ input: emailInput, check: checkEmail, dirty: false },
|
||||
{ input: vkInput, check: checkVK, dirty: false },
|
||||
{ input: agreeOfertaInput, check: checkOferta, dirty: false },
|
||||
{ input: agreePolicyInput, check: checkPolicy, dirty: false }
|
||||
];
|
||||
|
||||
/* ====================================================
|
||||
Validation Functions
|
||||
==================================================== */
|
||||
function showError(input, show) {
|
||||
const group = input.closest('.form-group') || input.closest('.checkbox-group');
|
||||
if (show) {
|
||||
group.classList.add('has-error');
|
||||
} else {
|
||||
group.classList.remove('has-error');
|
||||
}
|
||||
}
|
||||
|
||||
function checkName() {
|
||||
const val = nameInput.value.trim();
|
||||
// Simple validation: Name should not be empty and should have at least 2 characters
|
||||
const isValid = val.length >= 2;
|
||||
showError(nameInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkPhone() {
|
||||
const val = phoneInput.value;
|
||||
const digits = val.replace(/\D/g, '');
|
||||
// Correctly formatted length is 18 (+7 (999) 999-99-99 has 18 characters)
|
||||
// Digits should be exactly 11
|
||||
const isValid = digits.length === 11 && val.startsWith('+7') && val.length === 18;
|
||||
showError(phoneInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkEmail() {
|
||||
const val = emailInput.value.trim();
|
||||
// Standard compliant email format check: name@domain.zone (with domain part >= 2 characters)
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
const isValid = emailRegex.test(val);
|
||||
showError(emailInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkVK() {
|
||||
const val = vkInput.value.trim().toLowerCase();
|
||||
// Check if URL includes vk.com or vkontakte.ru
|
||||
const isValid = val.length > 0 && (val.includes('vk.com') || val.includes('vkontakte.ru'));
|
||||
showError(vkInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkOferta() {
|
||||
const isValid = agreeOfertaInput.checked;
|
||||
showError(agreeOfertaInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function checkPolicy() {
|
||||
const isValid = agreePolicyInput.checked;
|
||||
showError(agreePolicyInput, !isValid);
|
||||
return isValid;
|
||||
}
|
||||
|
||||
/* ====================================================
|
||||
Interaction Listeners (UX enhancements)
|
||||
==================================================== */
|
||||
fields.forEach(field => {
|
||||
// When focus is lost, mark the field as dirty and run validation
|
||||
field.input.addEventListener('blur', () => {
|
||||
field.dirty = true;
|
||||
field.check();
|
||||
});
|
||||
|
||||
// When typing or checking, if the field was already flagged as containing an error, validate on the fly
|
||||
const eventType = field.input.type === 'checkbox' ? 'change' : 'input';
|
||||
field.input.addEventListener(eventType, () => {
|
||||
if (field.dirty) {
|
||||
field.check();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* ====================================================
|
||||
Phone Input Mask Implementation
|
||||
==================================================== */
|
||||
phoneInput.addEventListener('input', (e) => {
|
||||
let value = e.target.value;
|
||||
|
||||
// Keep only digits
|
||||
let digits = value.replace(/\D/g, '');
|
||||
|
||||
// If it starts with 7 or 8 (common in Russian mobile inputs), strip it to rebuild properly
|
||||
if (digits.startsWith('7') || digits.startsWith('8')) {
|
||||
digits = digits.substring(1);
|
||||
}
|
||||
|
||||
// Limit to 10 digits (excluding +7 prefix)
|
||||
digits = digits.substring(0, 10);
|
||||
|
||||
let formatted = '';
|
||||
if (digits.length > 0) {
|
||||
formatted = '+7 (' + digits.substring(0, 3);
|
||||
}
|
||||
if (digits.length >= 3) {
|
||||
formatted += ') ';
|
||||
}
|
||||
if (digits.length > 3) {
|
||||
formatted += digits.substring(3, 6);
|
||||
}
|
||||
if (digits.length > 6) {
|
||||
formatted += '-' + digits.substring(6, 8);
|
||||
}
|
||||
if (digits.length > 8) {
|
||||
formatted += '-' + digits.substring(8, 10);
|
||||
}
|
||||
|
||||
e.target.value = formatted;
|
||||
|
||||
// Check validation on the fly if marked dirty
|
||||
const phoneField = fields.find(item => item.input === phoneInput);
|
||||
if (phoneField && phoneField.dirty) {
|
||||
checkPhone();
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent cursor jumps or weird input state on backspace
|
||||
phoneInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Backspace') {
|
||||
const val = e.target.value;
|
||||
// Allow easy clearing of prefix
|
||||
if (val === '+7 ' || val === '+7' || val === '+') {
|
||||
e.target.value = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-complete +7 on focus if field is empty
|
||||
phoneInput.addEventListener('focus', (e) => {
|
||||
if (!e.target.value) {
|
||||
e.target.value = '+7 ';
|
||||
}
|
||||
});
|
||||
|
||||
// Clean up field on blur if only the prefix remains
|
||||
phoneInput.addEventListener('blur', (e) => {
|
||||
if (e.target.value === '+7 ' || e.target.value === '+7') {
|
||||
e.target.value = '';
|
||||
}
|
||||
const phoneField = fields.find(item => item.input === phoneInput);
|
||||
if (phoneField) {
|
||||
phoneField.dirty = true;
|
||||
checkPhone();
|
||||
}
|
||||
});
|
||||
|
||||
/* ====================================================
|
||||
Form Submission
|
||||
==================================================== */
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Flag all fields as dirty to trigger validation visual errors
|
||||
fields.forEach(field => {
|
||||
field.dirty = true;
|
||||
});
|
||||
|
||||
// Run validation checks
|
||||
const isNameValid = checkName();
|
||||
const isPhoneValid = checkPhone();
|
||||
const isEmailValid = checkEmail();
|
||||
const isVKValid = checkVK();
|
||||
const isOfertaValid = checkOferta();
|
||||
const isPolicyValid = checkPolicy();
|
||||
|
||||
if (isNameValid && isPhoneValid && isEmailValid && isVKValid && isOfertaValid && isPolicyValid) {
|
||||
// Gather form data
|
||||
const formData = {
|
||||
name: nameInput.value.trim(),
|
||||
phone: phoneInput.value,
|
||||
email: emailInput.value.trim(),
|
||||
vk: vkInput.value.trim(),
|
||||
agreeOferta: agreeOfertaInput.checked,
|
||||
agreePolicy: agreePolicyInput.checked,
|
||||
agreeNewsletter: agreeNewsletterInput.checked
|
||||
};
|
||||
|
||||
// Disable submit button during request
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const originalBtnText = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = 'Отправка...';
|
||||
|
||||
// Send to our backend server (supports running on localhost:8000)
|
||||
fetch('http://localhost:8000/submit', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
.then(response => {
|
||||
return response.json().then(data => {
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Ошибка сервера');
|
||||
}
|
||||
return data;
|
||||
}).catch(err => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Ошибка сети или сервера');
|
||||
}
|
||||
throw err;
|
||||
});
|
||||
})
|
||||
.then(data => {
|
||||
// Success State: Animate form fading out and success window fading in
|
||||
formContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
||||
formContainer.style.opacity = '0';
|
||||
formContainer.style.transform = 'translateY(-10px)';
|
||||
|
||||
setTimeout(() => {
|
||||
formContainer.style.display = 'none';
|
||||
successContainer.style.display = 'flex';
|
||||
successContainer.style.opacity = '0';
|
||||
successContainer.style.transform = 'translateY(10px)';
|
||||
|
||||
// Trigger browser reflow for CSS transition
|
||||
successContainer.offsetHeight;
|
||||
|
||||
successContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
||||
successContainer.style.opacity = '1';
|
||||
successContainer.style.transform = 'translateY(0)';
|
||||
}, 300);
|
||||
|
||||
// Reset all inputs
|
||||
form.reset();
|
||||
fields.forEach(field => {
|
||||
field.dirty = false;
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error submitting form:', error);
|
||||
alert('Произошла ошибка при отправке заявки: ' + error.message + '. Пожалуйста, убедитесь, что сервер server.py запущен.');
|
||||
})
|
||||
.finally(() => {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalBtnText;
|
||||
});
|
||||
} else {
|
||||
// Focus on the first element that failed validation
|
||||
const firstInvalid = fields.find(field => {
|
||||
if (field.input === nameInput) return !isNameValid;
|
||||
if (field.input === phoneInput) return !isPhoneValid;
|
||||
if (field.input === emailInput) return !isEmailValid;
|
||||
if (field.input === vkInput) return !isVKValid;
|
||||
if (field.input === agreeOfertaInput) return !isOfertaValid;
|
||||
if (field.input === agreePolicyInput) return !isPolicyValid;
|
||||
return false;
|
||||
});
|
||||
|
||||
if (firstInvalid) {
|
||||
firstInvalid.input.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* ====================================================
|
||||
Reset / Back to Form Handler
|
||||
==================================================== */
|
||||
resetBtn.addEventListener('click', () => {
|
||||
successContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
||||
successContainer.style.opacity = '0';
|
||||
successContainer.style.transform = 'translateY(10px)';
|
||||
|
||||
setTimeout(() => {
|
||||
successContainer.style.display = 'none';
|
||||
formContainer.style.display = 'block';
|
||||
formContainer.style.opacity = '0';
|
||||
formContainer.style.transform = 'translateY(-10px)';
|
||||
|
||||
// Trigger browser reflow for CSS transition
|
||||
formContainer.offsetHeight;
|
||||
|
||||
formContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
||||
formContainer.style.opacity = '1';
|
||||
formContainer.style.transform = 'translateY(0)';
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user