Creare un modulo per la raccolta dei contatti ed essere sicuri che i dati non siano fasulli

In questo articolo vedremo come creare e validare un form in JavaScript, ovvero garantire prima dell’invio dei dati che l’utente abbia immesso dei dati validi o quantomeno ‘abbastanza validi’.

Creazione della pagina in HTML

Per creare il nostro esempio, su come validare un form in JavaScript, innanzitutto dobbiamo creare il nostro form in html.

Inseriamo i vari campi di input con le relative etichette e infine il pulsante per inviare i dati su cui inseriremo l’evento onclick:

<html>
<body>
<form method="post" name="invio">

<p><label>Nome</label><input type="text" name="nome"></p> 
<p><label>Telefono</label><input type="text" name="telefono"></p> 
<p><label>Email:</label><input type="email" name="email"></p>
<p><label>Password</label><input type="password" name="password"></p>
<p><label>Conferma password:</label><input type="password" name="conferma"></p>
<br>
<p><input type="button" value="Invia" onclick="valida()"></p>

</form>

<div  id="errore" style="background-color:red; visibility: hidden; padding:10px; color: white;"><p >Inserisci i dati del form</p></div>

</body>

</html>

Implementazione della funzione

Adesso dobbiamo costruire la funzione valida() richiamata nel pulsante invia.

Per ricavare i vari campi immessi negli input in questo caso useremo:

document.nome_del_form.nome_campo.value;

quindi ad esempio: document.invio.nome.value dove invio è il nome che abbiamo assegnato al form e nome è il campo di input.

Il primo campo da controllare sarà il nome.
Se il nome è un campo vuoto allora mostriamo la finestra di dialogo che avvisa che il campo deve essere compilato.

Il campo telefono dovrà essere numerico.

Per quanto riguarda la mail utilizziamo l’attributo Type email

Infine il controllo sulla password controllando la lunghezza, per verificare che sia composta almeno da sei caratteri e poi controlliamo se la conferma password coincide con questa.

Se tutti i controlli sono ok, si passa all’invio del modulo, in questo caso occorre inserire in document.invio.action = “#”; al posto di # l’indirizzo della pagina che dovrà elaborare i dati.

Script : ecco il codice

<script type="text/javascript">
    
    function errore(er)
    { 
      var a=document.getElementById("errore");
      a.innerHTML =  er;
      a.style.visibility='visible';
      return false;
    }

    function valida() {
    // Variabili associate ai campi del modulo
       var nome = document.invio.nome.value;
       var password = document.invio.password.value;
       var conferma= document.invio.conferma.value;
       var telefono = document.invio.telefono.value;
       var email = document.invio.email.value;
       if ((nome == "") || (nome == "undefined")) {
          //alert("Devi inserire un nome");
          errore("Devi inserire un nome");
          document.invio.nome.focus();
          return false;
       }
       if ((isNaN(telefono)) || (telefono == "") || (telefono == "undefined")) {
          errore("Devi inserire il telefono, attenzione deve essere numerico!");
          document.invio.telefono.value = "";
          document.invio.telefono.focus();
          return false;
       }
   
      if (password.length < 6 || (password == "") || (password == "undefined") ) 
       {
        alert("Scegli una password, minimo 6 caratteri");
        document.invio.password.focus();
        return false;
       }
       //Effettua il controllo sul campo CONFERMA PASSWORD
       if ((conferma == "") || (conferma == "undefined")) {
          alert("Devi confermare la password");
          document.invio.conferma.focus();
          return false;
        }
        if (password != conferma) {
           alert("La conferma password");
           document.invio.conferma.value = "";
           document.invio.conferma.focus();
           return false;
        }
        else {
          document.invio.action = "#"; 
          document.invio.submit();
       }
    }
    
    </script>

Provalo qui



Dalla stessa categoria