[jQuery] Formly: Plugin per aggiungere facilmente Stile e Validazione ai tuoi Form

In informatica, un form (letteralmente “modulo“) è un termine usato per indicare l’interfaccia di un’applicazione che consente all’utente di inviare uno o più dati liberamente inseriti dallo stesso; per descriverlo, può essere utile la metafora della “scheda da compilare” per l’inserimento di dati. Nella maggior parte dei casi il termine è riferito a form contenute in una pagina web: ad esempio le caselle di testo e i menu a tendina di una pagina di registrazione costituiscono un form.

Formly jQuery plugin

Formly permette in modo semplice di aggiungere stile e i controlli necessari sulla correttezza dei campi inseriti dagli utenti nei vostri form.

jQuery è l’unico prerequisito per usare questo plugin, quindi assicuratevi di averlo.

Il peso del plugin è molto ridotto, nella sua versione minified occupa solo 14kb e 17kb per quanto riguarda la full.

• DOWNLOAD Formly FULL VERSION (17kb)
• DOWNLOAD Formly MINIFIED VERSION (14kb)

COME SI USA

Nella sezione HEAD delle vostre pagina aggiungete il seguente codice (ovviamente customizzate i path in base alle vostre esigenze):

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.4.4.min.js”></script>
<script type=”text/javascript” src=”js/formly.js”></script>
<link rel=”stylesheet” href=”css/formly.css” type=”text/css” />

Adesso, costruite il vostro form usando gli standard markup HTML che avete sempre usato per costruire i form:

<form id=”MyForm” width=”400px”>
Your name: <input type=”text” name=”Name” />
Email address: <input type=”text” name=”Email” validate=”email” />
Username: <input type=”text” name=”Username” place=”No spaces” label=”Username” require=”true” />
Password: <input type=”password” name=”Password” label=”Password” require=”true” />
<input type=”submit” value=”Sign up” /><input type=”reset” value=”Clear” />
</form>

Per fare funzionare il tutto aggiungete le seguenti righe di codice:

<script>
$(document).ready(function()
{ $(‘#MyForm’).formly(); });
</script>

Il vostro form è pronto!

Compatibilità con i Browser

E’stato testato dallo sviluppatore con seguenti browser:

• iPhone/iPad,
• Chrome 8.0+
• Firefox 3.0+
• Safari 4.0+
• Internet Explorer 7.0+

Per approfondimenti consultate la home page di Formly.

Forse potrebbero interessarti anche questi articoli:

1. Creare un Link ad una parte specifica di testo all’interno di una pagina web con Citebite
2. [JavaScript ] Live.js: auto-refresh delle pagine ogni volta che vengono aggiornate
3. vintageJS: Applicare facilmente un effetto retro e vintage alle vostre foto [Web App]
4. Firefox 4.0 Finalmente Disponibile!
5. Make your move!