Ciao a tutti, nel mio sito uso un form html con un parte js per gestire l'obbligatorietà di compilazione dei campi, che deve essere alternativa per ogni coppia, nel senso che deve esserci almeno uno dei valori per le coppie "nome/cognome" e "email/telefono". Inoltre ho introdotto uno specifico messaggio di errore da visualizzare quando una delle coppie non è stata compilata: “Compila almeno uno di questi campi”.


Questo è il codice.


codice:
    <form action="" method="post">
        <div class="form-group">
            <div>
                <input type="text" id="nome" name="nome" class="form-control">
                <label for="nome">Nome</label>
            </div>
            <div>
                <input type="text" id="cognome" name="cognome" class="form-control">
                <label for="cognome">Cognome</label>
            </div>
        </div>
        <div class="form-group">
            <div>
                <input type="email" id="email" name="email" class="form-control">
                <label for="email">Email</label>
            </div>
            <div>
                <input type="tel" id="telefono" name="telefono" class="form-control" pattern="[0-9]+" title="Inserisci un numero di telefono valido">
                <label for="telefono">Telefono</label>
            </div>
        </div>
        <div class="form-group">
            <textarea id="messaggio" name="messaggio" class="form-control message" required></textarea>
            <label for="messaggio">Messaggio</label>
        </div>
        <button type="submit" class="btn">Invia</button>
    </form>


<script>
  var nomeInput = document.getElementById('nome');
  var cognomeInput = document.getElementById('cognome');
  var emailInput = document.getElementById('email');
  var telefonoInput = document.getElementById('telefono');
  var errorMessage = "Compila almeno uno di questi campi";

  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(errorMessage);
      cognomeInput.setCustomValidity(errorMessage);
    } else {
      nomeInput.setCustomValidity('');
      cognomeInput.setCustomValidity('');
    }
  }

  function toggleEmailTelefonoRequired() {
    var emailValue = emailInput.value.trim();
    var telefonoValue = telefonoInput.value.trim();

    if (!emailValue && !telefonoValue) {
      emailInput.setCustomValidity(errorMessage);
      telefonoInput.setCustomValidity(errorMessage);
    } else {
      emailInput.setCustomValidity('');
      telefonoInput.setCustomValidity('');
    }
  }

  // Aggiunta della validazione iniziale all'avvio dello script
  toggleNomeCognomeRequired();
  toggleEmailTelefonoRequired();
</script>


Vorrei apportare delle modifiche, ma sto avendo difficoltà ad implementarle.


Attualmente il messaggio "Compila almeno uno di questi campi" appare in relazione solo al primo della coppia di campi. Ad esempio, se non sono stati compilati nome e cognome, il messaggio appare su nome. Se non sono stati compilati email e telefono, appare su email.


Io vorrei invece che apparisse contemporaneamente su entrambi i campi, qualora ovviamente siano entrambi non compilati.


Come posso fare per attuare questa modifica?


Grazie del supporto!