Validació de formularis. Llibreria validate.js

Introducció

Aquests darrers dies hem estat veien el DOM, com podem accedir als elements del DOM (i dels formularis que pot contenir una pàgina web), i com podem associar events als elements.

En la primera UF vam veure les expressions regulars. Per tant, ara ens serà fàcil acomplir un dels objectius d'aquesta UF, que és la validació de formularis en el cantó del client.

En la pràctica de les rectes que es creuen ja hem validat un formulari, programant la validació des de zero. De totes maneres, avui dia no té massa sentit començar de zero. És millor utilitzar una llibreria que implementi una manera general d'imposar una o vàries regles sobre els elements dels formularis, de manera que sigui fàcil de mantenir i ampliar. La llibreria que farem servir és validate.js i ens basarem en l'exemple que es proposa.

• https://validatejs.org/

Desenvolupament

Anem a la pàgina web de la llibreria. Com sempre, allò ideal seria llegir-se tota la documentació. L'alternativa serà anar directament a l'exemple i estudiar/entendre el codi. L'exemple el trobem a Overview > Examples:

• https://validatejs.org/examples.html

És un formulari que està basat en Bootstrap. Juga una estona amb el formulari i observa quines regles estan implementades.

Mira el codi font i esbrina:

• la ruta on enllacem amb la llibreria validate.js i amb Bootstrap
• La manera com processem el formulari
• on estan definides les regles de validació, en format objectes de javascript.

Manera de començar

1. Anem a l'exemple que se'ns proporcionar. Fem veure codi font, copiem i enganxem en local.
2. validate.js: hem de descarregar la llibreria, o bé fer una referència amb el CDN corresponent.
3. Executem el codi en local (o a través d'un servidor web local).

Tasques/Formulari a realitzar: Formulari Reis d'Orient. Sucursal de Barcelona

Obligatori

Els Reis d'Orient tenen molta feina, o sigui que deleguen en els patges. Avui en dia s'ha perdut una mica la màgia, i s'ha habilitat un formulari per poder demanar entre 3 i 5 regals. Consta dels següents camps, on s'especifica les regles que volem imposar sobre aquests formularis:

• Nom: (no escriguis tot en majúscules)
• Cognoms: (no escriguis tot en majúscules)
• mail: (mail vàlid)
• Data de naixement: (format de data vàlid). Regla: tenir com a molt 14 anys.
• usuari: (mínim 6 caràcters)
• password: mínim 6 caràcters, lletres i números
• repetir password: (passwords han de coincidir)
• Província: Es llisten totes les províncies de Catalunya, però només és vàlida la província de Barcelona. Per a una altra província, mostrar el missatge: 'Per Girona (per ex), vés a la sucursal de Girona, https://girona.reismags.cat
• CP: codi postal vàlid (els cp de Barcelona han de començar per 08)
• Direcció entrega: format C/xxx, num yyy, zzz (per ex, C/mossèn Rafel, num 23, Palautordera)
• Llista regals: màxim 5 regals. La llista de regals va separada per comes.
• Efecte neu (snow). Implementa un efecte snow com el que podem veure a [1]. Has d'integrar l'exemple dins del teu formulari, i has de saber com canviar els paràmetres de la densitat de flocs, tamany, opacitat, velocitat dels flocs (copos).

Opcional

• canviar el disseny del formulari.
• canviar la manera com es mostren els missatges.
• Un cop enviat el formulari, en el cantó del servidor i amb PHP, generar la carta als Reis Mags amb la llibreria fpdf (http://www.fpdf.org/). El pdf pot contenir una plantilla de fons per tal que la carta quedi ben bonica.
• Pots utilitzar també una font divertida, com ara la que pots trobar a https://www.1001freefonts.com/ (apartat Christmas), o bé a Google Fonts, per ex:
• https://fonts.google.com/specimen/Mountains+of+Christmas

Solució parcial

Per tal de que el missatge de província estigui personalitzat, mirar en la documentació l'apartat de Constraints.

        provincia: {
          // You also need to input where you live
          presence: true,
          // And we restrict the countries supported to Sweden
          inclusion: {
            within: ["Barcelona"],
            // The ^ prevents the field name from being prepended to the error
            //message: "^Sorry, this service is for Sweden only"
            message: function(value, attribute, validatorOptions, attributes, globalOptions) {
            return validate.format("Servei només vàlid per Barcelona. Vés a http://%{num}.reismags.cat", {
            num: value
            });
            }
          }
        },

Llista de regals: com a molt hi poden haver 5 regals (és a dir, com a molt hi ha 4 comes que separen la llista de regals. Ho fem de la següent manera:

        "llista-regals": {
          presence: true,
          // ha d'haver-hi com a molt 5 regals, que significa de 0 a 4 comes de separació
          format: {
            pattern: /^(([a-zA-Z0-9]+,\s?){0,4}[a-zA-Z0-9]+)$/,
            flags: "",
            message: "No et passis, posa com a molt 5 regals, per ordre de prioritat."
          }
        }

nota: hem posat el pattern amb els caràcters //. Si ho fem entre cometes dobles no funciona del tot bé.

Entrega

Entregaràs en el Classroom la teva solució (document amb format pdf), amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina.

Opcionalment pots fer un screencast.

A part de fer l'entrega al classroom, avisa al professor quan tinguis la teva solució.

---

creat per Joan Quintana Compte, desembre 2021