Controllo accettazione informativa privacy con jQuery

Vediamo come sfruttare il framework JavaScript jQuery per aggiungere un controllo in un form che verifichi l'accettazione dell'informativa sulla privacy da parte dell'utente; nel caso specifico verrà analizzato il caso di un modulo per l'iscrizione ad una ipotetica newsletter che prevede il completamento di due soli campi: quello relativo all'indirizzo di posta elettronica da utilizzare per le comunicazioni con l'iscritto e il campo relativo al consenso per il trattamento dei dati personali.

Qualora l'utente effettui il submit del modulo senza aver messo la spunta sul checkbox relativo all'accettazione del trattamento dei dati personali il sistema restituirà un errore.

Avremo in sostanza un form sul modello di quello rappresentato nella figura seguente:

Il nostro modulo sarà contenuto il una propria div-box e conterrà soltanto il codice per i campi di input richiesti e quello per il pulsante d'invio; da notare come nell'esempio proposto il metodo per la spedizione dei parametri ("get") sia stato specificato soltanto per completezza, esso potrà quindi essere omesso:

<div id="div_form">
<form name="iscrizione" method="get" action="#">
<div id="titolo_form"><h1>Modulo newsletter</h1></div>
<div id="div_email"><input id="email" name="email"></div>
<div id="checkbox"><input name="ctrlDatiPersonali" id="ctrlDatiPersonali" type="checkbox">
Dichiaro di aver letto l'<a target="_blank" href="#">informativa sulla privacy</a> ai sensi del GDPR e do il consenso al trattamento dei dati personali.</div>
<div id="invio"><input value="Spedisci" name="privacy" class="Spedisci" type="button"></div>
</form></div>

Per esigenze legate all'argomento trattato, nello script JavaScript non sarà presente il controllo relativo al formato per il campo "email", verrà invece controllata la selezione (o meno) della checkbox "ctrlDatiPersonali":

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  $(function() {
      $("input[name='privacy']").click(
        function(){
          if ($("#ctrlDatiPersonali").is(":not(:checked)")){
              alert("Attenzione! Non hai dato il tuo assenso per il trattamento dei dati personali.");
              return;
            } else {  document.forms['iscrizione'].submit(); alert("Grazie! Hai dato il tuo assenso per il trattamento dei dati personali."); }
        });
  });
</script>

In pratica, la mancata selezione della checkbox porterà alla visualizzazione del seguente avviso:

Mentre la selezione della checkbox sarà confermata in questo modo:

Per comodità del lettore riporto l'intero sorgente della pagina contenente il form:

<!DOCTYPE html>
<html lang="it">
<head>
  <title>Newsletter</title>
  <style>
  body{font-family: arial, sans-serif; font-size: 400;}
  .container{ width: 560px; margin: 0 auto; padding: 0; overflow: hidden; }
  </style>
</head>
<body>
<div class="container">
<div id="div_form">
<form name="iscrizione" method="get" action="#">
<div id="titolo_form"><h1>Modulo newsletter</h1></div>
<div id="div_email"><input id="email" name="email"></div>
<div id="checkbox"><input name="ctrlDatiPersonali" id="ctrlDatiPersonali" type="checkbox">
Dichiaro di aver letto l'<a target="_blank" href="#">informativa sulla privacy</a> ai sensi del GDPR e do il consenso al trattamento dei dati personali.</div>
<div id="invio"><input value="Spedisci" name="privacy" class="Spedisci" type="button"></div>
</form></div>
</div>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript">
  $(function() {
      $("input[name='privacy']").click(
        function(){
          if ($("#ctrlDatiPersonali").is(":not(:checked)")){
              alert("Attenzione! Non hai dato il tuo assenso per il trattamento dei dati personali.");
              return;
            } else {  document.forms['iscrizione'].submit(); alert("Grazie! Hai dato il tuo assenso per il trattamento dei dati personali."); }
        });
  });
 </script>
</body>
</html>

Naturalmente, lo stesso tipo di controllo potrà essere esteso ad altre checkbox che non siano necessariamente quelle relative all'informativa sui dati personali.

I commenti degli utenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.