Quando si parla di web development molto spesso si pensa allo sviluppo di aspetti complicati e funzioni piuttosto complesse. Per chi sogna di fare carriera in questo settore, l’obiettivo minimo infatti è conoscere i principali programmi e imparar a ideare, realizzare, integrare e verificare i software impiegati in un sito o in un’applicazione web.
Come in tutte le cose però, prima di lavorare su operazioni difficili si parte sempre dalla teoria e dalle attività più semplici. Tra queste rientra la validazione di un form di un sito con JavaScript.
Sei già in grado di farla? Conosci i passaggi utili per effettuarla?
Cos’è e come si crea un form di contatto?
Un form di contatto è un modulo in formato digitale con campi obbligatori e/o facoltativi che l’utente deve compilare (per esempio user o nome e cognome, email e password). Affinché tutto sia corretto nel momento in cui l’utente, dopo aver riempito questi campi, invia questi dati premendo un bottone (per esempio INVIA), il programmatore deve stabilire dei criteri di validità che vadano a controllare che le informazioni fornite siano corrette.
Per creare un form c’è bisogno di un programma che funga da editor di testo (es. Visual Studio) che assiste il web developer nella scrittura di un codice. Si parte da una struttura semplice in HTML dove si creano delle caselle di testo in base al numero dei campi che si vuole far compilare (per esempio user o nome e cognome, email e password) più il pulsante per inviare le informazioni (per esempio INVIA). A questo va aggiunta la parte di stile con CSS per definire l’aspetto grafico.
Cos’è JavaScript
JavaScript è un linguaggio di scripting orientato agli oggetti e comunemente usato nei siti web perché permette di integrare le varie pagine con link, mappe e altri elementi che si aggiornano automaticamente. Viene utilizzato per rendere dinamiche le pagine che altrimenti sarebbero statiche: stabilisce quindi il comportamento delle pagine a seconda dell’azione da parte dell’utente, come il click di un pulsante, il passaggio del cursore, la compilazione di form appunto e altro ancora.
Come validare un form lato client
La validazione viene fatta in linguaggio JavaScript che però deve essere inserito nell’index HTML.
Una prima modalità è già possibile farla direttamente in HTML inserendo il codice “required” e facendo in modo che l’utente veda l’avviso di “compila questo campo” quando passa il cursore su quella finestra.
Con JavaScript invece per prima cosa bisogna definire delle prime funzioni che vanno a prendere gli elementi HTML su cui fare controlli e intanto verificano se il campo è vuoto oppure no. Lì si inseriscono alcuni valori booleani – cioè delle “regole” che hanno solo due alternative come risposte – per definire se le risposte sono vere o false, cioè corrette oppure no.
Dalla schermata in JavaScript si prende l’elemento che definisce un errore e per poi riportarlo nella schermata HTML. Si inseriscono dunque le condizioni e la funzione VALIDATE (per dare un feedback di validità) negli elementi dando una risposta di True (Vero) o False (Falso) a seconda che tutto sia corretto. Se per esempio l’utente lascia il campo user vuoto, gli apparirà un messaggio che dice “campo obbligatorio”.
La prima funzione di validazione quindi scatta quando l’utente clicca sul pulsante INVIA perché richiama la funzione VALIDATE che dà un feedback di validità all’utente.
Il secondo modo di validazione potrebbe essere inserire delle condizioni per cui se un campo non viene compilato correttamente, l’utente non può passare a quello successivo.
Per fare ciò, si aggiunge sul campo la funzione “validate” nelle caratteristiche del singolo campo (user, email, password)
Nella maggior parte dei form, è molto difficile vedere solo come unico campo di validazione l’obbligatorietà della compilazione. Tra le alternative più diffuse ci sono per esempio: “utilizza un nome user compreso tra 5 e 10 caratteri” oppure “inserisci un account potenzialmente valido” nel campo email.
Nei siti solitamente ci sono pochi campi perché lo scopo è di avere i contatti minimi per poi utilizzarli per ricontattare. Ci sono però altre situazioni in cui i campi da compilare sono davvero tanti (per esempio il form sul sito dell’INPS)
Diventa un Web Developer Full Stack certificato
Se sogni di fare carriera come Web Developer Full Stack e lavorare come freelance o dipendente per grandi aziende o software house, il master in Web Developer Full Stack di Click Academy è quello che fa per te e che ti permette di acquisire tutte le competenze e gli strumenti necessari per diventare un programmatore web full stack certificato. In pochi mesi infatti, anche partendo da zero, otterrai le conoscenze teoriche e soprattutto pratiche per lavorare e, al termine del corso, sarai in grado di ideare, realizzare, integrare e verificare i software impiegati in un sito o in un’applicazione web, conoscerai i principali linguaggi di markup e programmazione e potrai programmare contenuti per il web. Inoltre potrai ottenere la certificazione internazionale IC-PHP Certiport valida in tutto il mondo e richiesta dalle principali aziende.
Ricorda: ogni successo è frutto della conoscenza, dell’allenamento e dell’esperienza.
Buona formazione!
