TESTE – pedido registro software
#registration-form {
font-family: 'Montserrat', Verdana, sans-serif;
background-color: #ffffff;
padding: 30px;
max-width: 100%;
margin: 0 auto;
color: black;
}
#registration-form label {
display: block;
margin-top: 10px;
margin-bottom: 4px;
font-weight: 600;
font-size: 0.95rem;
}
#registration-form input {
width: 100%;
padding: 8px;
border: 1px solid #cce0ff;
border-radius: 4px;
background: #f9fbff;
transition: border 0.3s ease;
font-family: inherit;
}
#registration-form input:focus {
border-color: #0066cc;
background-color: #ffffff;
outline: none;
}
.participant-group {
background-color: #f2f7ff;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #0066cc;
margin-bottom: 20px;
}
#participant-count {
max-width: 80px;
}
.participant-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
#registration-form button[type="submit"] {
background-color: #004c99;
color: white;
font-weight: 600;
padding: 12px 25px;
font-size: 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s ease;
}
#registration-form button[type="submit"]:hover {
background-color: #0066cc;
}
@media (max-width: 600px) {
#registration-form button[type="submit"] {
width: 100%;
}
}
const fieldValidationRules = {
name: { label: "Nome", pattern: /^[a-zA-ZÀ-ÿ\s'-]{2,60}$/, required: true },
email: { label: "Email", pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, required: true },
phone: { label: "Telefone", pattern: /^(?:(?:\+55)?\s?)?(?:\(?[1-9][0-9]\)?\s?)?(?:9\d{4}|[2-9]\d{3})\-?\d{4}$/, required: true },
cep: { label: "CEP", pattern: /^[0-9]{8}$/, required: true },
street: { label: "Rua", pattern: /^.{3,100}$/, required: true },
number: { label: "Número", pattern: /^\d{1,6}$/, required: true },
complement: { label: "Complemento", pattern: /^.{0,100}$/, required: false },
neighbourhood: { label: "Bairro", pattern: /^.{2,100}$/, required: true },
city: { label: "Cidade", pattern: /^[a-zA-ZÀ-ÿ\s'-]{2,100}$/, required: true },
state: { label: "Estado (UF)", pattern: /^[A-Z]{2}$/, required: true },
institution: { label: "Instituição", pattern: /^.{2,100}$/, required: true },
course: { label: "Curso/Programa", pattern: /^.{2,100}$/, required: true },
percentage: { label: "Percentual", pattern: /^(100|[1-9]?[0-9])$/, required: true }
};
const participantsContainer = document.getElementById('participants-container');
const countInput = document.getElementById('participant-count');
countInput.addEventListener('input', () => {
const count = parseInt(countInput.value);
participantsContainer.innerHTML = '';
if (isNaN(count) || count < 1) return;
for (let i = 1; i <= count; i++) {
const group = document.createElement('fieldset');
group.classList.add('participant-group');
group.innerHTML = `
`;
participantsContainer.appendChild(group);
const cepField = group.querySelector(`#cep-${i}`);
cepField.addEventListener('blur', async () => {
const cepVal = cepField.value.replace(/\D/g, '');
if (/^[0-9]{8}$/.test(cepVal)) {
try {
const res = await fetch(`https://viacep.com.br/ws/${cepVal}/json/`);
const data = await res.json();
if (data.erro) throw new Error("CEP não encontrado");
group.querySelector(`#street-${i}`).value = data.logradouro || '';
group.querySelector(`#neighbourhood-${i}`).value = data.bairro || '';
group.querySelector(`#city-${i}`).value = data.localidade || '';
group.querySelector(`#state-${i}`).value = data.uf || '';
} catch (e) {
alert(`Erro: ${e.message}`);
}
} else {
alert("CEP inválido. Use 8 números.");
}
});
}
});
document.getElementById('registration-form').addEventListener('submit', async function (e) {
e.preventDefault();
const formData = new FormData(this);
const dataObj = {};
const participants = [];
// Collect number of participants
const count = parseInt(formData.get('participant-count'));
// For each participant, collect their fields
for (let i = 1; i <= count; i++) {
participants.push({
name: formData.get(`name-${i}`),
percentage: formData.get(`percentage-${i}`),
email: formData.get(`email-${i}`),
phone: formData.get(`phone-${i}`),
cep: formData.get(`cep-${i}`),
street: formData.get(`street-${i}`),
number: formData.get(`number-${i}`),
complement: formData.get(`complement-${i}`),
neighbourhood: formData.get(`neighbourhood-${i}`),
city: formData.get(`city-${i}`),
state: formData.get(`state-${i}`),
institution: formData.get(`institution-${i}`),
course: formData.get(`course-${i}`)
});
}
dataObj.participants = participants;
const URL_LINK = 'https://script.google.com/macros/s/AKfycbwMGqrQW3GWHWkrDYZHe_obEChyMx_ezncsx9-8Gxz41dXPop6hqQe9w6mwi4xGIC53RQ/exec';
try {
const response = await fetch(URL_LINK, {
method: 'POST',
body: JSON.stringify(dataObj),
headers: { 'Content-Type': 'application/json' }
});
const result = await response.json();
if (result.status === 'success') {
alert(`Registro enviado com sucesso! ID do projeto: ${result.projectId}`);
this.reset();
document.getElementById('participants-container').innerHTML = '';
} else {
alert(`Erro ao enviar registro: ${result.message}`);
}
} catch (error) {
alert('Erro na comunicação com o servidor.');
console.error(error);
}
});