• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

JavaScript Validazione JQuery

#Abercrombie

Utente Medio
Autore del topic
1 Ottobre 2012
204
29
Miglior risposta
0
Ciao a tutti,
vi spiego il problema che ormai da giorni mi tormenta e che non sono riuscito in alcun modo a risolvere.
Vorrei validare un form con JQuery (premettendo che sono novizio nel mondo JQuery) ma non riesco a farlo con il plugin più famoso e completo (
Perfavore, Entra oppure Registrati per vedere i Link!
) in quanto il form che voglio validare è un form un po' particolare.

Vi spiego più nel dettaglio: ho trovato quest'ottimo template di form che funziona in questo modo:
Perfavore, Entra oppure Registrati per vedere i Link!

In poche parole è quindi un form che mostra più pagine (nello stesso documento), realizzato con JQuery.
Quello che vorrei rendere possibile è che prima che avvenga l'animazione del cambio di pagina, avvenga la validazione dei campi e se (e solo se) tutti questi sono validi allora avviene il passaggio alla pagina successiva.

Il problema credo di averlo capito: dovrebbe essere che non funziona la validazione in quanto il plugin che esegue la validazione viene eseguito solo nel momento in cui si clicca sul pulsante "submit" e non su un pulsante qualunque (come nel mio caso, infatti per passare da una pagina all'altra si clicca sul pulsante "prossimo").

Vi allego qui il codice del form prima di tutto:



form.html (ho allegato volutamente qui direttamente il file css nell'head)

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!





Ometto sempre volutamente gli altri file .js (come ad esempio quello dell'upload dei file o quello del conta caratteri) in quanto non sono necessari.
Allego invece il file index.js che è quello che regola lo "sliding" del form:

index.js

JavaScript:
Perfavore, Entra oppure Registrati per vedere i codici!


Spero qualcuno di voi sappia aiutarmi a risolvere questo problema. Per il momento vi ringrazio in anticipo :emoji_slight_smile:
 
Ciao.

Ti do un consiglio su come potresti farlo. Pensa logicamente a qual'è la routine che verrà seguita per poter fare tutto ciò che è di tuo interesse:

- Riempio i campi della pagina corrente
- Clicco submit
- Sovrascrivo l'evento di submit con un check di click sul pulsante next, oppure inserisco un evento OnSubmit ed evito che venga eseguito il submit del form con un preventDefault
- Se vengono validati i campi, passo alla prossima pagina, altrimenti do gli errori.

Per gestire le varie pagine, quali hai completato, i valori riempiti etc. potresti utilizzare una gestione con uno stack della strada percorsa fin'ora, quindi pushando ogni qualvolta che una pagina è completa un indicativo per capire se lo hai superato o meno, ed effettuare un pop nel caso in cui torni indietro.

Per la validazione, non dovresti avere troppi problemi con questa metodologia, perché semplicemente avrai 3 DIV o qualsiasi contenitore per ogni pagina con un ID specifico, e ogni qualvolta che clicchi Next, andare ad effettuare un'animazione con un display block per mostrare la prossima pagina, e quella precedente la nascondi. Tutto questo, fatto con dei position absolute sui vari contenitori, dovrebbe dare l'effetto da te richiesto...

Spero di aver compreso bene la domanda e di averti fornito una risposta adeguata.