Semplice validazione form in javascript per email e nome utente

Semplice validazione form in javascript per email e nome utente

Semplice validazione form in javascript per email e nome utente 

Risultato finale: DEMO

validazione javascript

Come vedete andremo a realizzare una semplice validazione form (più precisamente del campo email e nome utente) in javascript.

PREMESSA: Questo articolo vuole offrire una validazione con poche righe di codice – facilmente integrabile ovunque – ma comunque robusta. Esistono plugin js che fanno solo questo e permettono un controllo estensivo e capillare sulla validazione.

Struttura html

La struttura html appare molto semplice:

<form id="form">
<input name="nome" id="nome" type="text" required />
<input name="email" id="email" type="email" required />
<input type="submit" class="test" value="test">
</form>

Di fatto creiamo un tag form che racchiude a sua volta i vari input da validare.  Ho implementato il tag html5 required utile nel caso qualcuno abbia js disabilitato.

Non manca, nel footer il load delle library a jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Codice js di validazione

Per prima cosa apriamo il DOM e impostiamo un evento al click sul pulsante di invio – inibendo il submit automatico del form con preventDefault :

$(document).ready(function() {

  $(".test").click(
  function(e){


        e.preventDefault();


  });//click

});//Dom

A questo punto andiamo a recuperare le varibili email e nome al click in questo modo:

var email = $("input[name='email']").val();
var nome = $("input[name='nome']").val();

console.log(nome);
console.log(email);

se compilate il form e premete invio in console dovrebbe apparirvi il valore inserito nei vari input.

Il principio di validazione che userò è semplice ma solido: farò check singoli e selettivi (prima per il nome/testo e poi per la mail): se il valore inserito passa il check imposto una variabile di validazione a 1, altrimenti la mantengo a 0. 

Per i controlli invece userò delle espressioni regolari:

per il nome utente controllerò solo che sia presente qualche carattere senza numeri o simboli.

Per la mail userò il pattern regex ufficiale di html5 – trovate le specs qui. E’ compatibile con i nuovi domini (esempio .tech etc) e funziona bene anche con email/sender come root@localhost (che di fatto potrebbe essere una mail valida).

        //Testo
        var re = /[A-Za-z -']$/;
        if(re.test(document.getElementById("nome").value)){
          console.log("Nome valida");
          document.getElementById("nome").style.border ='1px solid #3c8f1b';
          validation_name = 1;
        }else{
          console.log("Nome non valido");
          document.getElementById("nome").style.border ='1px solid #c30000';
          validation_name = 0;
        }


        //Email
        var checkEmail = email.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
        console.log(checkEmail);
        if(checkEmail){
          console.log("Email valida");
           document.getElementById("email").style.border ='1px solid #3c8f1b';
           validation_email = 1;
         } else {
           console.log("Email non valida");
           document.getElementById("email").style.border ='1px solid #c30000';
           validation_email = 0;
         }

Come vedete il codice di validazione è abbastanza lineare e chiaro. Ho aggiunto la colorazione dei bordi dell’input in rosso o verde a seconda del tipo di result (per una maggiore UX).

Non ci resta che mettere il controllo finale che determina se inviare o meno la mail. L’invio può essere fatto sia con ajax sia forzando il normale submit del form.

//Validazione
if(validation_email == 1 && validation_name == 1){ console.log("INVIO!"); } else { console.log("Validazione non superata"); }

Codice completo

<form id="form">
<input name="nome" id="nome" type="text" required />
<input name="email" id="email" type="email" required />
<input type="submit" class="test" value="test">
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function() {

  $(".test").click(
  function(e){


       
        var email = $("input[name='email']").val();
        var nome = $("input[name='nome']").val();

        console.log(nome);
        console.log(email);

        //Testo
        var re = /[A-Za-z -']$/;
        if(re.test(document.getElementById("nome").value)){
          console.log("Nome valida");
          document.getElementById("nome").style.border ='1px solid #3c8f1b';
          validation_name = 1;
        }else{
          console.log("Nome non valido");
          document.getElementById("nome").style.border ='1px solid #c30000';
          validation_name = 0;
        }


        //Email
        var checkEmail = email.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
        console.log(checkEmail);
        if(checkEmail){
          console.log("Email valida");
           document.getElementById("email").style.border ='1px solid #3c8f1b';
           validation_email = 1;
         } else {
           console.log("Email non valida");
           document.getElementById("email").style.border ='1px solid #c30000';
           validation_email = 0;
         }

        //Validazione
        if(validation_email == 1 && validation_name == 1){ console.log("INVIO!"); } else { console.log("Validazione non superata"); }

        e.preventDefault();


  });//click

});//Dom
</script>

Conclusioni

Come spiegato in fase di premessa lo script è facilmente integrabile, robusto e snello da implementare ovunque (form ajax, form classici etc). Nel caso abbiate bisogno di una validazione più completa vi invito a visionare online alternative come formvalidator o il più recente Parsley

Fammi sapere cosa ne pensi nei commenti qui sotto!

Image credits “javascript” disponibile su Shutterstock!

Lascia la tua opinione

×