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 un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

js
Up Next:

Come aggiungere tag style css con javascript

Come aggiungere tag style css con javascript