sab 24 giugno 2017 - Lo Sviluppatore  anno III

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

 

Lascia un commento

Top