Validació de formularis. Llibreria validate.js - Historial de revisió

Joan: /* Entrega */

2021-12-14T15:43:46Z

Entrega

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

2021-12-14T15:41:55Z

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

Joan a 15:37, 14 des 2021

2021-12-14T15:37:57Z

Joan: /* Desenvolupament */

2020-12-14T18:37:20Z

Desenvolupament

Joan: /* Formulari a realitzar */

2019-12-09T17:59:16Z

Formulari a realitzar

Pàgina nova

=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.
*https://validatejs.org/
=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:
*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ó, amb format JSON.
==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/ 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''.
<pre>
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
});
}
}
},
</pre>

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:
<pre>
"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."
}
}
</pre>
'''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]]

{{Autor}}, Novembre 2018
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

*https://validatejs.org/
<pre>
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.
</pre>
{{Autor}}, desembre 2018

← Versió més antiga		Revisió del 15:43, 14 des 2021
Línia 80:		Línia 80:

	=Entrega=		=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ó.

	{{Autor}}, desembre 2021		{{Autor}}, desembre 2021

@@ Línia 21: / Línia 21: @@
 ==Tasques/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:
@@ Línia 35: / Línia 37: @@
 *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 [https://www.cssscript.com/demo/animated-snowfall-effect/]. 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'').
-Opcionalment:
+===Opcional===
 *canviar el disseny del formulari.
 *canviar la manera com es mostren els missatges.

@@ Línia 4: / Línia 4: @@
 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.
+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ò 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:
+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.
@@ Línia 14: / Línia 14: @@
 *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.
+*on estan definides les regles de validació, en format objectes de javascript.
 ==Manera de començar==
 #Anem a l'exemple que se'ns proporcionar. Fem ''veure codi font'', copiem i enganxem en local.
 #validate.js: hem de descarregar la llibreria, o bé fer una referència amb el CDN corresponent.
-#Executem el codi a través d'un servidor web local (no podem executar-lo en local ''file://'')
+#Executem el codi en local (o a través d'un servidor web local).
-==Formulari a realitzar==
+==Tasques/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:
@@ Línia 28: / Línia 27: @@
 *Cognoms:  (no escriguis tot en majúscules)
 *mail: (mail vàlid)
-*Data de naixement: (format de data 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, 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
+*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, 23, Palautordera)
+*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.
@@ Línia 41: / Línia 40: @@
 *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/ https://www.1001freefonts.com/] (apartat Christmas)
+*Pots utilitzar també una font divertida, com ara la que pots trobar a [https://www.1001freefonts.com/ https://www.1001freefonts.com/] (apartat Christmas), o bé a Google Fonts, per ex:
 ===Solució parcial===
@@ Línia 78: / Línia 78: @@
 =Entrega=
-{{Autor}}, Novembre 2018
+{{Autor}}, desembre 2021