Bene, apriamo le danze :)

Logo di Livevalidation

Logo di Livevalidation

In quest’articolo trattiamo un problema che tutti noi programmatori web dobbiamo affrontare: La validazione dei campi di una form.

Beh ora con jquery e particolarmente con il plug-in livevalidation diventa semplicissimo e possiamo avere grandi risultati scrivendo poco codice.
Ecco il risultato finale

Ecco i link di jquery e  live-validation dove potete effettuare il download gratuito delle librerie gratuitamente e logicamente consultare anche la documentazione

Ma andiamo ad analizzare il codice della pagina:
Andremo a creare un form di inserimento di un contatto con nome, cognome, mail e note.
Includiamo jquery,live-validation e i 2 css, validation.css e un css che utilizza appunto il suddetto script mentre base.css e il css contenente gli stili della pagina

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/livevalidation_comp.js"></script>

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/validation.css" />

E poi osserviamo il contenuto del body

<form name="form" id="form" method="post" action="" enctype="multipart/form-data">
   <table>
     <tr>
       <td width="100">Nome</td>
       <td>
         <input type="text" name="nome" id="nome"/>
         <script type="text/javascript">
           var nome = new LiveValidation('nome', { validMessage: ' ', wait: 500, onlyOnSubmit: true});
           nome.add(Validate.Presence, {failureMessage: "Campo Obbligatorio"});
         </script>
       </td>
    </tr>
    <tr>
      <td>Cognome</td>
      <td>
        <input type="text" name="cognome" id="cognome"/>
          <script type="text/javascript">
          var cognome = new LiveValidation('cognome', { validMessage: ' ', wait: 500, onlyOnSubmit: true});
          cognome.add(Validate.Presence, {failureMessage: "Campo Obbligatorio"});
          </script>
      </td>
    </tr>
    <tr>
      <td>Mail</td>
      <td>
        <input type="text" name="mail" id="mail"/>
        <script type="text/javascript">
          var mail = new LiveValidation('mail', { validMessage: ' ', wait: 500, onlyOnSubmit: true});
          mail.add(Validate.Presence, {failureMessage: "Campo Obbligatorio"});
          mail.add(Validate.Email, {failureMessage: "Formato Mail errato"});
        </script>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center" style="text-align:center"><br />Note</td>
    </tr>
    <tr>
      <td colspan="2" align="center">
       <textarea id="note" name="note" style="width:100%; height:150px;"></textarea></td>
    </tr>
<tr>
<td colspan="2" align="center"><br /><input type="submit" value="Invia"/></td>
</tr>
</table>
</form>

Ecco ora non ci resta che testare la nostra nuova pagina.

Download esempio – All’interno del rar troverete l’ultima versione di jquery, il plug-in livevalidation e i css creati da me ;)