lun 18 giugno 2018 - Lo Sviluppatore  anno IV

Validazione di una form con JQuery

Condividi

Scrivere form è un task comune nello sviluppo web e per quel che mi riguarda la trovo una cosa davvero noiosa, ma che spesso non posso evitare…. 🙂 In presenza di una form è altrettanto comune verificare che ciò che viene inserito dall’utente sia valido. Questa operazione viene spesso fatta lato server, ma in tanti casi conviene farla lato client, non inviando i dati al server se questi non risultano prima validi. E’ comunque consigliabile, per una maggiore sicurezza adottare entrambi i tipi di validazione.

In questo articolo vediamo come JQuery ci viene incontro per eseguire la validazione lato client di una form. Per fare questo tipo di operazioni cè un plug-in di jquery che ci fornisce gli strumenti necessari per la validazione di vari tipi di dato.

Ma passiamo subito ad un esempio pratico che è sempre il miglior modo per vedere come funzionano le cose:

Supponiamo di creare una form di registrazione in cui va inserita una login, una email e una password, imponendo dei requisiti per questi campi in modo tale che prima che la form venga inviata vengano fatti i controlli di validazione basati sulle nostre definizioni:

HTML

Questa è la pagina HTML in cui è possibile vedere gli import necessari. Per dare un minimo di stile alla cosa usiamo anche le classi css di bootstrap.

<!DOCTYPE HTML>
<html>
<head>
  <title>Esempio di validazione con JQuery</title>
  <!--Ultima versione di jQuery (minified) -->
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <!-- Ultima versione di jquery.validate (minfied) -->
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <!-- Ultima versione di bootstrap (minified) -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- codice jQuery -->
  <script type="text/javascript" src="app.js"></script>
  <!-- Custom styles -->
  <style>
    #form label.error {
		color: red;
		font-weight: bold;
	}
	
	.main {
		width: 600px;
		margin: 0 auto;
	}
  </style>
</head>
<body>
  <!-- Form container -->
  <div class="main">
    <h1>Registrazione</h1>

    <!-- form da validare -->
    <form action="#" id="form">
      <div class="form-group">
        <label for="login">Login</label>
        <input type="text" name="login" class="form-control">
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" name="email" class="form-control">
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" name="password" class="form-control">
      </div>
      
      <div class="form-group">
        <input type="submit" value="Registrati" class="submit" class="form-control">
      </div>
    </form>

  </div>
</body>
</html>

Javascript

Questo è il file app.js, importato nell’header del file HTML sopra dove vengono definite le nostre regole di validazione.

$().ready(function() {
    // Selezione form e definizione dei metodi di validazione
    $("#form").validate({
        // Definiamo le nostre regole di validazione
        rules : {
            // login - nome del campo di input da validare
            login : {
              // Definiamo il campo login come obbligatorio
              required : true
            },
            email : {
                required : true,
                // Definiamo il campo email come un campo di tipo email
                email : true
            },
            password : {
                required : true,
                // Settiamo la lunghezza minima e massima per il campo password
                minlength : 5,
                maxlength : 8
            }
        },
        // Personalizzimao i mesasggi di errore
        messages: {
            login: "Inserisci la login",
            password: {
                required: "Inserisci una password password",
                minlength: "La password deve essere lunga minimo 5 caratteri",
                maxlength: "La password deve essere lunga al massimo 8 caratteri"
            },
            email: "Inserisci la tua email"
        },
        // Settiamo il submit handler per la form
        submitHandler: function(form) {
            form.submit();
        }
    });
});

Il risultato di questo esempio dovrebbe essere una cosa simile:

reg_example

Validatori predefiniti

Questo plug-in di validazione ci mette a disposizione vari metodi di validazione utili nei i casi più comuni. Di seguito alcuni di questi:

Riferimenti

Documentazione JQuery Validation Plug-in

 

One thought on “Validazione di una form con JQuery

  1. Grazie per questo articolo, è da due giorni che mi scervello per trovare il modo di poter fare “submit” solo in determinate condizioni, quali: password lunghe, uguali l’una con l’altra etc…
    Proverò subito ad utilizzare questo metodo, personalmente stavo utilizzando un codice simile al seguente per poter capire se ci fossero le condizioni per disabilitare o abilitare il tasto “submit” ma non ho trovato nessuna soluzione:

    $(function() {
    var x = $(“#paw”);
    var y = $(“#ugualePassw”);
    if (x == y && x != “” && y != “”) {
    alert(“non è disabilitato(in teoria!)”);
    $(“#submit”).removeAttr(“disabled”);

    }
    else {
    $(“#submit”).attr(“disabled”, “disabled”);
    alert(“è disabilitato(in teoria!)”);
    }
    })

Lascia un commento

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

Top