Semplice validazione form in javascript per email e nome utente
Risultato finale: DEMO
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!
