Formaggino per controllare i form

La funzionalità core di questa libreria si basa principalmente sul metodo HTMLSelectElement.checkValidity(), un metodo delle WebAPIs che permette di scatenare un evento di verifica dei dati in qualsiasi momento vogliamo, eseguendolo ad esempio tramite un event listener.

La libreria è composta da tre classi principali 

• Requests: che si occupa di gestire le chiamate asincrone e di passare i dati che riceviamo dal form
• Validation: che gestisce tutte le azioni di triggering degli errori lato interfaccia
• Formaggino: che raccoglie le 2 precedenti per fare si che possano essere chiamate con semplicità 

Non facciamo altro che personalizzare l’output che riguarda gli errori, giocando semplicemente con l’inserimento o l’eliminazione della classe ‘active’ all’interno degli elementi che vogliamo mostrare o nascondere.

Come Funziona?

Utilizzare Formaggino è semplicissimo e veloce. 

Basterà installare il pacchetto tramite NPM o Yarn.

npm install formaggino

yarn add formaggino

Adesso possiamo includere la nostra libreria nel codice js.

import Formaggino from "formaggino";

const formaggino = new Formaggino();

La libreria riconosce tutte le informazioni che vengono passate tramite l'elemento html <form> ed effettua l'invio dei dati in maniera asincrona. L’attributo novalidate è fondamentale per impedire al browser di effettuare la validazione standard quando viene fatta l’azione di submit.

<form

  method="POST"

  id="form"

  action="https://your-action.io/sendform"

  novalidate

>

  <input name="name" type="text" required />

  <span class="form-error">Your error text</span>

  ...

  <div class="form-report-error">error</div>

  <div class="form-report-success">success</div>

  <span class="form-loading"> loading... </span>

  <button type="submit">submit</button>

</form>

Passiamo all’attributo action l’endpoint delle nostre api o il link alla pagina che processa i dati inseriti degli utenti. 

Adesso possiamo chiamare il metodo submitEvent che si occuperà lanciare la validazione quando noi effettuiamo il subit.

formaggino.submitEvent("#form");

Basterà infine definire il nostro css per agire sulle notifiche 

.form-error,

.invalid-feedback,

.form-loading,

.form-report-error,

.form-report-success {

  display: none;

}

 

.active {

  display: block;

}

 

.form-error{

     color: red;

…

}

Abbiamo deciso di scrivere il progetto in VanillaJs per dare un alto grado di libertà a coloro che la utilizzeranno, evitando di legarsi a particolari dipendenze.

Formaggino è un progetto open source: puoi trovare il codice qui, nella nostra repo GitHub, e informazioni più dettagliate sulla documentazione qui. Al momento il progetto è in una fase embrionale e stiamo lavorando a ulteriori features, come la gestione dell’invio di file e l’inserimento di ulteriori opzioni per garantire il più alto grado di configurazione.