Formulari. Rectes que es creuen

Introducció

La validació de formularis la farem de dues maneres:

• en aquesta entrega programarem les funcions a pèl.
• en la següent entrega utilitzarem la llibreria validate.js.

La validació dels formularis i el seu disseny és important de cara a la usabilitat de les aplicacions web. Volem que l'experiència d'usuari sigui bona i fàcil. Omplir un formulari no ha de ser un maldecap.

Projecte

Posem per escrit allò que ja hem comentat a classe.

L'equació d'una recta és de la forma:

y = a*x + b

on a és un número que representa el pendent de la recta (la inclinació; si la a és positiva la recta va cap amunt; si la a és negativa va cap avall).

I la b és el terme independent, que representa el punt de tall quan la x=0.

Dues rectes que no siguin paral·leles (tenen diferent pendent) sempre es tallaran en un punt (i només un punt). Anem a fer un exemple:

y = 3x+2
y = -x + 4

=> 3x+2=-x+4 => 4x = 2 => x=0.5 => y=3.5
El punt de tall és (0.5, 3.5)

En el nostre formulari haurem de posar les dues rectes, i les diferents opcions amb què podem entrar el format és:

• y=3x+1 (números a i b sense decimal)
• y=-3x-1 (poden ser números negatius)
• y=+3x-1 (la a pot tenir un + de forma explícita)
• y=-3.344x-1.321 (podem posar valors decimals a les constants a i b)
• y = 5x + 4 (podem posar espais en blanc per tal de ser més clars)
• y = -3*x+4 (podem utilitzar el signe de multiplicar *)
• És obligatori que hi hagi la y, =, x, amb aquest ordre
• el terme independent és opcional. Per ex: y = 3x (vol dir que el terme independent val 0)

Totes aquestes maneres d'entrar l'equació de la recta són vàlides, i per tant haurem de trobar una expressió regular que ho faci bé.

nota: veure la solució de l'expressió regular a baix de tot.

Barra de progrés

Pots trobar a la xarxa molts exemples de progress bar fets amb Javascript. Per exemple:

• https://www.w3schools.com/howto/howto_js_progressbar.asp

Tasques a realitzar

1. La pàgina web constarà de títol, formulari, botó Enviar, barra de progrés, camp per al resultat.

2. el formulari constarà de nom, recta1, recta2.

3. El camp nom es validarà amb les següents regles:

• no pot contenir números
• només pot contenir caràcters vàlids (lletres minúscules, majúscules, espai en blanc)
• podem tenir només el nom, nom i cognom, o nom i dos cognoms.

4. El camp de les rectes es validarà tal com s'ha comentat més amunt.

5. Pots validar els camps en el mateix moment que canvïis el valor dels camps (onchange), o en el onsubmit del botó Enviar. Això ho pot decidir el programador.

6. Mostraràs un missatge clar (informatiu i ben dissenyat) de si els camps compleixen els criteris.

7. Enviar. Si els valors de les rectes són correctes, hauràs de destriar els valors a1, b1, a2 i b2 per trobar la solució solx, soly (en format 2 decimals).

8. Simularàs que aquest càlcul és molt costós i difícil fent un progress bar de, posem per cas, 2 segons.

9. Mostraràs el resultat per pantalla.

10. Tot plegat ben dissenyat, amb codi html, css i js separat en fitxers independents.

Entrega al Classroom

Entregaràs en el Classroom la teva solució, 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. Avisa al professor quan tinguis la teva solució.

solució expressió regular

Entregarem la discussió després de discutir-ho a classe.

re = /^[y]{1}\s?[=]\s?[+|-]?(\d+([.]?\d+)?[*]?)?[x]{1}(\s?[+|-]{1}\s?\d+([.]?\d+)?)?$/
 
joc de proves complet:
//true:
re.test('y = +33.53x - 32.3')
re.test('y = +3353x - 323')
re.test('y = 3353x + 323')
re.test('y=3353x+323')
re.test('y=33x')
re.test('y=x')
re.test('y=x - 4')
re.test('y= 5*x - 4')
re.test('y= 5.32x - 4')

//false:
re.test('5.32x - 4')
re.test('y= 5.32x +- 4')
re.test('y= *x - 4')
re.test('y = 5.32 - 4')

---

creat per Joan Quintana Compte, desembre 2021