Non mandatemi a quel paese per il triplo post, ma forse è meglio scrivere gli aggiornamenti, prima che qualcuno impieghi del tempo su una situazione che si è nel frattempo modificata.
Preciso che NON apporterò altre modifiche, dal momento che adesso tutto funziona come volevo, fino a quando non ci saranno delle risposte sul forum.
Ciò in quanto - lo premetto - il risultato è quello che volevo, ma il percorso per arrivarci è tortuoso e poco sensato.
Per il momento lo tengo così, ma vorrei migliorare questo codice.
Ecco lo script funzionante:
codice:
<script> var nomeInput = document.getElementById('nome');
var cognomeInput = document.getElementById('cognome');
var emailInput = document.getElementById('email');
var telefonoInput = document.getElementById('telefono');
var form = document.querySelector('form');
nomeInput.addEventListener('input', toggleNomeCognomeRequired);
cognomeInput.addEventListener('input', toggleNomeCognomeRequired);
emailInput.addEventListener('input', toggleEmailTelefonoRequired);
telefonoInput.addEventListener('input', toggleEmailTelefonoRequired);
function toggleNomeCognomeRequired() {
var nomeValue = nomeInput.value.trim();
var cognomeValue = cognomeInput.value.trim();
if (!nomeValue && !cognomeValue) {
nomeInput.setCustomValidity("Compila almeno uno dei campi nome / cognome");
cognomeInput.setCustomValidity("Compila almeno uno dei campi nome / cognome");
} else {
nomeInput.setCustomValidity('');
cognomeInput.setCustomValidity('');
}
}
function toggleEmailTelefonoRequired() {
var emailValue = emailInput.value.trim();
var telefonoValue = telefonoInput.value.trim();
if (!emailValue && !telefonoValue) {
emailInput.setCustomValidity("Compila almeno uno dei campi email / telefono");
telefonoInput.setCustomValidity("Compila almeno uno dei campi email / telefono");
} else {
emailInput.setCustomValidity('');
telefonoInput.setCustomValidity('');
}
}
form.addEventListener('submit', function (event) {
event.preventDefault();
var nomeValue = nomeInput.value.trim();
var cognomeValue = cognomeInput.value.trim();
var emailValue = emailInput.value.trim();
var telefonoValue = telefonoInput.value.trim();
var errorMessageNomeCognome = "Compila almeno uno dei campi nome / cognome";
var errorMessageEmailTelefono = "Compila almeno uno dei campi email / telefono";
var isValid = true;
if (!nomeValue && !cognomeValue) {
nomeInput.setCustomValidity(errorMessageNomeCognome);
cognomeInput.setCustomValidity(errorMessageNomeCognome);
isValid = false;
} else {
nomeInput.setCustomValidity('');
cognomeInput.setCustomValidity('');
}
if (!emailValue && !telefonoValue) {
emailInput.setCustomValidity(errorMessageEmailTelefono);
telefonoInput.setCustomValidity(errorMessageEmailTelefono);
isValid = false;
} else {
emailInput.setCustomValidity('');
telefonoInput.setCustomValidity('');
}
if (isValid) {
var formData = new FormData(form);
fetch(form.action, {
method: 'POST',
body: formData,
})
.then(function (response) {
if (response.ok) {
// Il form è stato inviato con successo
form.reset();
showMessage('success', 'Grazie per averci contattato. Vi risponderemo nel più breve tempo possibile.');
} else {
// Errore durante l'invio del form
showMessage('error', 'Si è verificato un errore durante l\'invio del messaggio. Riprova più tardi.');
}
})
.catch(function (error) {
console.error('Error:', error);
});
}
});
function showMessage(type, message) {
var messageContainer = document.createElement('div');
messageContainer.classList.add('message-container');
if (type === 'success') {
messageContainer.classList.add('success-message-container');
messageContainer.innerHTML = `
<input type='checkbox' id='success-checkbox' class='hidden-checkbox'>
<div class='success-message'>${message}</div>
<label for='success-checkbox' class='close-button' onclick="closeMessage()">Chiudi</label>
`;
} else {
messageContainer.classList.add('error-message-container');
messageContainer.innerHTML = `
<input type='checkbox' id='error-checkbox' class='hidden-checkbox'>
<div class='error-message'>${message}</div>
<label for='error-checkbox' class='close-button' onclick="closeMessage()">Chiudi</label>
`;
}
document.body.appendChild(messageContainer);
}
function closeMessage() {
var messageContainer = document.querySelector('.message-container');
messageContainer.classList.add('hidden');
setTimeout(function () {
document.body.removeChild(messageContainer);
}, 500);
}
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault();
var isValid = true; // Presumo che tu abbia già il controllo sulla validità del form
if (isValid) {
var formData = new FormData(this);
fetch(this.action, {
method: 'POST',
body: formData,
})
.then(function (response) {
if (response.ok) {
// Il form è stato inviato con successo
document.getElementById('myForm').reset();
showMessage('success', 'Grazie per averci contattato. Vi risponderemo nel più breve tempo possibile.');
} else {
// Errore durante l'invio del form
showMessage('error', 'Si è verificato un errore durante l\'invio del messaggio. Riprova più tardi.');
}
})
.catch(function (error) {
console.error('Error:', error);
});
}
});
</script>
E qui la parte CSS:
codice:
/* Stili per il contenitore del messaggio */.message-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
padding: 25px;
background-color: white;
border: 1px solid #999;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
animation: fadeIn-message 0.5s ease-in-out;
border-radius: 8px;
opacity: 1;
transition: opacity 0.5s;
}
.sfondo-message-container {
width: 100%;
height: 100%;
z-index: 998;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
transition: opacity 0.5s ease-in-out;
animation: fade-in 0.5s ease-in-out;
}
/* Stili per il messaggio di successo */
.success-message {
color: #333;
text-align: center;
line-height: 1.7;
}
/* Stili per il messaggio di errore */
.error-message {
color: red;
text-align: center;
}
/* Stili per il pulsante Chiudi */
.close-button {
background-color: #054363;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-top: 15px;
border-radius: 6px;
}
.hidden-checkbox {
display: none;
}
.hidden-checkbox:checked ~ .sfondo-message-container {
opacity: 0;
pointer-events: none;
}
/* Mostra il messaggio di successo o di errore quando l'input checkbox è selezionato */
.hidden-checkbox:checked ~ .message-container {
opacity: 0;
pointer-events: none;
}
@keyframes fadeIn-message {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Stile per nascondere il messaggio con animazione di dissolvenza */
.message-container.hidden {
/* Imposta l'opacità a 0 per nascondere il messaggio */
opacity: 0;
}
In pratica all'apparizione del messaggio di successo/errore, la dissolvenza viene gestita via CSS con keyframes.
Alla chiusura, viene gestita via JS.
Ovviamente tutto ciò, anche se funziona, non ha molto senso.
Seguendo il consiglio di Killerworm, vorrei modificare lo script semplificandolo, per far si che sia la il messaggio in entrata, che quello in uscita, con le relative dissolvenze, siano gestiti via JS.
Questo mi consterebbe anche di eliminare il Checkbox che costituisce ovviamente un espediente CSS per fare una cosa che tipicamente si realizza con JS.
Mi rendo conto che a questo punto il topic rischierebbe di prendere una piego più da JS che la CSS.
Chiedo pertanto ai moderatori se possiamo continuare (per chiudere) qui o se bisogno spostarsi in JS.
Grazie!
Rispondi quotando
Originariamente inviata da ivanisevic82
