Newer
Older
tonitalia-pluginsoci / assets / js / form.js
(function () {
	'use strict';

	var form = document.querySelector('.ton-reg-form form');
	if (!form || typeof tonRegForm === 'undefined') {
		return;
	}

	var cfRegex = /^[A-Z]{6}[0-9]{2}[A-Z][0-9]{2}[A-Z][0-9]{3}[A-Z]$/;
	var dateRegex = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;

	function showFieldError(fieldWrap, message) {
		var input = fieldWrap.querySelector('.ton-reg-form__input');
		var error = fieldWrap.querySelector('.ton-reg-form__error');
		if (!input || !error) {
			return;
		}
		fieldWrap.classList.add('ton-reg-form__field--invalid');
		error.textContent = message;
		error.hidden = false;
		input.setCustomValidity(message);
	}

	function clearFieldError(fieldWrap) {
		var input = fieldWrap.querySelector('.ton-reg-form__input');
		var error = fieldWrap.querySelector('.ton-reg-form__error');
		if (!input || !error) {
			return;
		}
		fieldWrap.classList.remove('ton-reg-form__field--invalid');
		error.hidden = true;
		error.textContent = '';
		input.setCustomValidity('');
	}

	function clearAllErrors() {
		form.querySelectorAll('.ton-reg-form__field').forEach(clearFieldError);
		form.querySelectorAll('.ton-reg-form__checkbox--invalid').forEach(function (el) {
			el.classList.remove('ton-reg-form__checkbox--invalid');
		});
	}

	function getFieldWrap(name) {
		return form.querySelector('.ton-reg-form__field[data-field="' + name + '"]');
	}

	function validateField(name) {
		var wrap = getFieldWrap(name);
		if (!wrap) {
			return true;
		}
		var input = wrap.querySelector('.ton-reg-form__input');
		if (!input) {
			return true;
		}

		var value = (input.value || '').trim();

		if (input.required && !value) {
			showFieldError(wrap, tonRegForm.msgRequired);
			return false;
		}

		if (!value) {
			clearFieldError(wrap);
			return true;
		}

		if ('email' === input.type && !input.checkValidity()) {
			showFieldError(wrap, tonRegForm.msgEmail);
			return false;
		}

		if ('codice_fiscale' === name) {
			if (!cfRegex.test(value.toUpperCase())) {
				showFieldError(wrap, tonRegForm.msgCf);
				return false;
			}
		}

		if ('cap' === name && !/^[0-9]{5}$/.test(value)) {
			showFieldError(wrap, tonRegForm.msgCap);
			return false;
		}

		if (('provincia_nascita' === name || 'provincia_residenza' === name) && !/^[A-Za-z]{2}$/.test(value)) {
			showFieldError(wrap, tonRegForm.msgProvincia);
			return false;
		}

		if (('data_nascita' === name || 'data_dichiarazione' === name) && !dateRegex.test(value)) {
			showFieldError(wrap, tonRegForm.msgDate);
			return false;
		}

		if (input.pattern && !new RegExp('^(?:' + input.pattern + ')$').test(value)) {
			showFieldError(wrap, tonRegForm.msgRequired);
			return false;
		}

		clearFieldError(wrap);
		return true;
	}

	function validateCheckboxes() {
		var ok = true;
		form.querySelectorAll('input[type="checkbox"][required]').forEach(function (cb) {
			var label = cb.closest('.ton-reg-form__checkbox');
			if (!cb.checked) {
				if (label) {
					label.classList.add('ton-reg-form__checkbox--invalid');
				}
				ok = false;
			} else if (label) {
				label.classList.remove('ton-reg-form__checkbox--invalid');
			}
		});
		return ok;
	}

	function validateCaptcha() {
		var captcha = form.querySelector('#ton_reg_captcha_answer');
		if (!captcha) {
			return true;
		}
		if (!captcha.value && captcha.required) {
			captcha.setCustomValidity(tonRegForm.msgCaptcha);
			return false;
		}
		captcha.setCustomValidity('');
		return true;
	}

	form.querySelectorAll('.ton-reg-form__input').forEach(function (input) {
		input.addEventListener('input', function () {
			var wrap = input.closest('.ton-reg-form__field');
			if (wrap) {
				clearFieldError(wrap);
			}
			if ('codice_fiscale' === input.name && input.value) {
				input.value = input.value.toUpperCase().replace(/\s+/g, '');
			}
			if (('provincia_nascita' === input.name || 'provincia_residenza' === input.name) && input.value) {
				input.value = input.value.toUpperCase();
			}
		});

		input.addEventListener('blur', function () {
			if (input.name) {
				validateField(input.name);
			}
		});
	});

	var birthInput = form.querySelector('#ton_reg_data_nascita');
	if (birthInput) {
		birthInput.addEventListener('change', function () {
			var warning = form.querySelector('.ton-reg-form__warning');
			if (warning) {
				warning.remove();
			}
			var date = birthInput.value;
			if (!date || !dateRegex.test(date)) {
				return;
			}
			var parts = date.split('-');
			var birth = new Date(parseInt(parts[2], 10), parseInt(parts[1], 10) - 1, parseInt(parts[0], 10));
			var today = new Date();
			var age = today.getFullYear() - birth.getFullYear();
			var m = today.getMonth() - birth.getMonth();
			if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
				age -= 1;
			}
			if (age < 18) {
				var div = document.createElement('div');
				div.className = 'ton-reg-form__warning';
				div.setAttribute('role', 'alert');
				div.textContent =
					'Se sei minorenne, la domanda deve essere firmata da entrambi i genitori o dal tutore legale.';
				form.insertBefore(div, form.firstChild);
			}
		});
	}

	form.addEventListener('submit', function (e) {
		clearAllErrors();

		var fields = [
			'cognome',
			'nome',
			'luogo_nascita',
			'provincia_nascita',
			'data_nascita',
			'codice_fiscale',
			'comune_residenza',
			'provincia_residenza',
			'indirizzo',
			'numero_civico',
			'cap',
			'telefono',
			'email',
			'luogo_dichiarazione',
			'data_dichiarazione',
		];

		var valid = true;
		fields.forEach(function (name) {
			if (!validateField(name)) {
				valid = false;
			}
		});

		if (!validateCheckboxes()) {
			valid = false;
		}

		if (!validateCaptcha()) {
			valid = false;
		}

		if (!valid) {
			e.preventDefault();
			var firstInvalid = form.querySelector('.ton-reg-form__field--invalid .ton-reg-form__input, .ton-reg-form__checkbox--invalid input, :invalid');
			if (firstInvalid && firstInvalid.focus) {
				firstInvalid.focus();
			}
			return;
		}

		if (!form.checkValidity()) {
			e.preventDefault();
			form.reportValidity();
		}
	});
})();