Validació de formularis. Llibreria validate.js

De wikijoan
Salta a la navegació Salta a la cerca

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.

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.

Desenvolupament

Anem a la pàgina web de la llibreria. Com sempre, allò idea 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:

É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ó, amb format JSON.

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 a través d'un servidor web local (no podem executar-lo en local file://)

Formulari a realitzar

Formulari Reis d'Orient. Sucursal de Barcelona.

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)
  • 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, 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, http://reismags.girona.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, 23, Palautordera)
  • Llista regals: màxim 5 regals. La llista de regals va separada per comes.

Opcionalment:

  • 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)

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

Els alumnes entregaran al Google Classroom tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Google Classroom dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology

creat per Joan Quintana Compte, Novembre 2018 


Formulari Reis Màgics d'Orient. Sucursal de Barcelona

Nom: (no escriguis tot en majúscules)
Cognoms:  (no escriguis tot en majúscules)
Data de naixement: 
usuari: (mínim 6 caràcters)
password: mínim 6 caràcters, lletres i números
repetir password: (passwords han de coincidir)
Província: només vàlid per la província de Barcelona. Per a una altra comunitat, mostrar el missatge: 'Per Girona (per ex), vés a la sucursal de Girona
CP: codi postal vàlid
Direcció entrega: format C/xxx, num yyy, zzz (per ex, C/mossèn Rafel, 23, Palautordera) 
Llista regals: mínim 3 regals, màxim 5 regals. La llista de regals va separada per comes.

Un cop validat les dades del formulari, enviar l'informe a la base de dades, i generar la carta als Reis Màgics amb fpdf.

creat per Joan Quintana Compte, desembre 2018

Obtingut de «http://wiki.joanillo.org/index.php?title=Validació_de_formularis._Llibreria_validate.js&oldid=297161»