Sviluppando per gioco applicazioni web senza grandi logiche dietro (e quindi senza l’utilizzo di Framework vari) mi sono imbattuto nel problema della validazione dei FORM. Facendo una breve ricerca su Google, ho notato la grossa quantità di tool/librerie sviluppate con JQuery che svolgono questa funzione. Ognuna con i suoi pro e contro.

Solitamente, da parte mia, la scelta di un tool piuttosto che un altro dipende principalmente da questi punti:

  • Facilità di utilizzo
  • Documentazione chiara e veloce da comprendere (use case ben definiti piuttosto che dover fare reverse engeenering per capire cosa fare)
  • Facilità di customizzazione (nei casi in cui non esista qualcosa che faccia esattamente quello che voglio)

Ed ecco la serie di tool che ho analizzato:

 

JQuery Form Validator

(http://www.formvalidator.net/)

Questo fu il primo tool che analizzai, il modo in cui si definisce cosa si vuole autorizzare sul tale input è fatto nel modo che preferisco: si inserisce nei tag di input una serie di attributi extra che vengono gestiti solo dalla libreria (quello che fa il più noto AngularJS).

$.validate({
 form : '#registration, #login'
});

Gli esempi e le configurazioni possibili sono ben descritte. Inoltre c’è la possibilità di sovrascrivere i messaggi con dei messaggi custom.

Molto interessante anche la possibilità di gestire “Input suggestions” in modo chiaro e veloce:

<input name="color" data-suggestions="White, Green, Blue, Black, Brown">

Altre feature che rendono il tool una buona soluzione, sono le possibilità di configurazioni per quanto riguarda il posizionamento degli errori e la modalità di valutazione degli input (possibilità di validazione onblur oppure al click sul bottone di submit):

<script>
  // The element where the error messages should be placed
  var $messages = $('#error-message-wrapper');
  $.validate({
    validateOnBlur : false, // disable validation when input looses focus
    errorMessagePosition : $messages,
    scrollToTopOnError : false // Set this property to true if you have a long form
  });
</script>

Parsley

(http://parsleyjs.org/doc/index.html)

Parsley sembrerebbe la fotocopia di JQuery Form Validation, con la differenza che di default per questo tool la validazione non viene fatta asincronamente sull’onBlur (anche se l’opzione è supportata). Anche per questo tool è possibile gestire i messaggi e sovrascrivere il messaggio di default. Sono anche già presenti più di dieci linguaggi diversi per le segnalzioni standard.

Di seguito le due modalità di inserimento della validazione:

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<form data-parsley-validate>
...
</form>
<form id="form">
  ...
</form>
<script type="text/javascript">
  $('#form').parsley();
</script>

Questo tool sembrerebbe un po’ meno maturo rispetto al precedente, anche se la vasta quantità di listener e eventi, permettono allo sviluppatore di implementare comportamenti custom che in altre librerie sarebbero possibili solo andando a sovrascrivere parti di esse. C’è da sottolineare che per un utilizzo standard, questo sembrerebbe uno strumento buono quanto il precedente.

Validate.js

(http://rickharrison.github.io/validate.js/)

Il tool è tutto il contrario rispetto ai due descritti in precedenza. Una volta incluso il JS, basta richiamare una funzione JS inserendo l’elenco degli input da validare e “il gioco è fatto”. A mio parere non è il modo più pulito di fare le cose, però su applicazioni ridotte o addirittura su pagine web che contengono i classici form di sendMail, questa potrebbe essere la soluzione.

Probabilmente questo è il tool più da “smanettoni” rispetto agli altri. Il setup è immediato:

<script type="text/javascript" src="validate.min.js"></script>
var validator = new FormValidator('example_form', [{
 name: 'req',
 display: 'required',
 rules: 'required'
}], function(errors, event) {
 if (errors.length > 0) {
  // Show the errors
 }
});

Questa funzione FormValidator(formName, fields, callback) è tutto quello che è necessario conoscere per iniziare ad utilizzare la validazione con Validate.js. Esiste la possibilità di inserire validazioni custom, però pensandolo come tool di validazione per piccoli e semplici form, non credo servano particolari customizzazioni rispetto a quelli già definiti (che non sono pochi).

AngularJS

(https://angularjs.org/)

Cosa si dice a questo punto? The last but not the least. Credo ne saremo tutti d’accordo! Ovviamente è molto riduttivo pensare a Angular come un tool per la validazione, infatti vedo questa feature del tool come un plus che non poteva mancare rispetto ad un tool molto completo per la gestione delle pagine web in modo dinamico.

Visto che dedicherò almeno un articolo a questo progetto, credo sia inutile descrivere la validazione dei campi di Angular in questo articolo.

 

Conclusione

Fatta la panoramica, probabilmente avrete capito quale tool scartare e magari anche quale scegliere…

Fidandomi di quello che si dice sul web, parsley sembrava il tool migliore (per distacco) e per questo diventò la mia scelta. Finito di lavorarci ho capito che JQuery Form Validation in realtà sarebbe stato più comodo e veloce. Quindi a mio avviso, parsley non è il migliore per distacco, ma al massimo potrei dire che i due tool staranno alla pari…

Nonostante questo, ammetto che, se dovesse capitarmi di sviluppare un piccolo sito che gestisca un piccolo form di sendMail (o simile), un test con Validate.js lo farei….

 

 

Tags: