const PREFIXO_BACKUP = 'data-old-';

function adicionaComBackup(elemento, atributo, novoValor) {
	if (elemento.hasAttribute(atributo)) {
		const valorAtual = elemento.getAttribute(atributo);
		elemento.setAttribute(PREFIXO_BACKUP + atributo, valorAtual);
		elemento.setAttribute(atributo, novoValor + ' ' + valorAtual);
	} else {
		elemento.setAttribute(atributo, novoValor);
	}
}

function restauraBackup(elemento, atributo) {
	const atributoBackup = PREFIXO_BACKUP + atributo;
	if (elemento.hasAttribute(atributoBackup)) {
		const valorBackup = elemento.getAttribute(atributoBackup);
		elemento.setAttribute(atributo, valorBackup);
		elemento.removeAttribute(atributoBackup);
	} else {
		elemento.removeAttribute(atributo);
	}
}

function adicionaErro(campo, mensagem) {
	const elemento = document.createElement('p'),
	      paiCampo = campo.parentNode,
		  idGerado = 'erro' + new Date().getTime();

	elemento.id = idGerado;
	elemento.innerHTML = mensagem;
	elemento.className = 'erro-validacao__mensagem';
	// insere a mensagem logo após o campo
	paiCampo.insertBefore(elemento, campo.nextSibling);
	
	// marca o campo com cor diferente
	campo.classList.add('erro-validacao__campo');
	
	adicionaComBackup(campo, 'aria-describedby', idGerado);
}

function apagaErrosAntigos(form) {
	const mensagensAntigas = form.querySelectorAll('.erro-validacao__mensagem');
	for (var i = 0, total = mensagensAntigas.length; i < total; i++) {
		mensagensAntigas[i].parentNode.removeChild(mensagensAntigas[i]);
	}
	
	// apaga marcação diferente nos campos com erro
	const camposComErro = form.querySelectorAll('.erro-validacao__campo');
	for (var i = 0, total = camposComErro.length; i < total; i++) {
		camposComErro[i].classList.remove('erro-validacao__campo');
		restauraBackup(camposComErro[i], 'aria-describedby');
	}
}

function senhaValida(senha) {
	return senha.length >= 8 && /\d/.test(senha) && /\w/.test(senha);
}

function valida(campo) {
	if (campo.required && campo.value.trim() === '') {
		adicionaErro(campo, 'Este campo é obrigatório.');
		return false;
	}
	// validação simplificada apenas para o exemplo
	if (campo.type === 'number' && !/^\d*$/.test(campo.value)) {
		adicionaErro(campo, 'Preencha apenas com números válidos!');
		return false;
	}
	// validação customizada para senha
	if (campo.id === 'senha' && !senhaValida(campo.value)) {
		adicionaErro(campo, 'Senha inválida!');
		return false;
	}
	return true;
}

form.setAttribute('novalidate', '');
form.addEventListener('submit', function(e) {
	let valido = true;
	e.preventDefault();
	apagaErrosAntigos(form);
	for (let i = 0; i < form.length; i++) {
		if (!valida(form[i])) {
			if (valido) {
				// primeiro campo com erro; ganha foco
				form[i].focus();
			}
			valido = false;
		}
	}
	if (valido) {
		form.submit();
	}
});