• 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

1 Ottobre 2012
204
0
27
29
Varese
Miglior risposta
0
#1 Autore del topic
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 ( https://jqueryvalidation.org/documentation/ ) 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: Workin - Application
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:
<!DOCTYPE html>
<html class="no-js">
<head>

<style>
/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
    height: 100%;
    /*Image only BG fallback*/
   
    /*background = gradient + image pattern combo*/
    background:
        linear-gradient(rgba(153, 0, 102, 0.7), rgba(102, 0, 153, 0.7));
}

body {
    font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
   
    /*stacking fieldsets above each other*/
    position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#msform input, #msform textarea , #msform select{
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#msform .action-button {
    width: 100px;
    background: #2C3E50;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #56799c;
}


#msform p{
    text-align: left;
    font-size: 15px;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #2C3E50;
    color: white;
}

.exceeded {
    color: red;
}

textarea {
    width: 400px;
    height: 200px;
}

.coutdown  {
    text-align: center;
    font-size: 15;
}


/* Bottone upload */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

body {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



.hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
}




.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 100%;
    font-size: 18px;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}


/* style 2 */

.inputfile-2 + label {
    color: #2C3E50;
    border: 2px solid currentColor;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    font-size: 13px;
   
}

.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover {
    color: #56799c;
}











</style>
  <meta charset="UTF-8">
  <title>Workin - Application</title>
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

 

<!-- Script per contare il numero dei caratteri 1 -->
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>

</head>

<body>

<!-- Inizio FORM -->
<form id="msform" enctype="multipart/form-data" method = "POST">

<!-- La progressbar in alto -->
  <ul id="progressbar">
    <li class="active">Dati Personali</li>
    <li>Presentazione</li>
    <li>Immagini</li>
  </ul>
<!-- Fieldset 1 -->
<fieldset>
    <h2 class="fs-title">Dati Personali</h2>
    <h3 class="fs-subtitle">Inserisci i tuoi dati</h3>
   
    <p>Lavoro:</p></br>
    <select>
    <option>Seleziona un lavoro</option>
    <option>Imbianchino</option>
    <option>Idraulico</option>
    <option>Elettricista</option>
    <option>Ripetizioni</option>
    <option>Dottore</option>
    <option>Insegnante musica</option>
    <option>Babysitter</option>
    <option>Giardiniere</option>
    </select>
    <p>Indirizzo Email:</p></br>
    <input type="email" name="email" placeholder="Email" />
    <p>Nome:</p></br>
    <input type="text" name="nome" placeholder="Nome" />
    <p>Cognome:</p></br>
    <input type="text" name="cognome " placeholder="Cognome" />
    <p>Data di nascita:</p></br>
    <input type="date" name="nascita"/>
   
    <input type="button" name="next" class="next action-button" value="Prossimo" />
</fieldset>
 
<!-- Fieldset 2 -->
<fieldset>
    <h2 class="fs-title">Presentazione</h2>
    <h3 class="fs-subtitle">Forniscici una tua presentazione</h3>
   
    <p>Video di presentazione:</p></br>
    <p>
        <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
        <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Inserisci un video&hellip;</span></label>
    </p>
    <p>Biografia & Competenze:</p></br>
    <div class = "countdown"><textarea name ="bio" id="bio" placeholder="Biografia & Competenze"></textarea></div>
   
    <input type="button" name="previous" class="previous action-button" value="Indietro" />
    <input type="button" name="next" class="next action-button" value="Prossimo" />
  </fieldset>
 
 
<!-- Fieldset 3 -->
<fieldset>
    <h2 class="fs-title">Immagini</h2>
    <h3 class="fs-subtitle">Le immagini dei documenti non verranno divulgate</h3>
   
    <p>Immagine del profilo:</p></br>
    <p>
        <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
        <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Immagine del profilo&hellip;</span></label>
    </p>
    <p>Fronte documento:</p></br>
    <p>
        <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
        <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>ID front&hellip;</span></label>
    </p>
    <p>Retro documento:</p></br>
    <p>
        <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
        <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>ID retro&hellip;</span></label>
    </p>
    <input type="button" name="previous" class="previous action-button" value="Indietro" />
    <input type="submit" name="submit" class="submit action-button" value="Invia!" />
</fieldset>

</form>




<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src="js/index.js"></script>


<!-- Funzione per l'upload dei file personalizzato -->
<script src="js/custom-file-input.js"></script>

<!-- Funzione per contare il numero dei caratteri 2 -->
<script type="text/javascript" src="jquery.charactercounter.js"></script>
<script>
        $(function(){
            $("#bio").characterCounter();
        });
</script>





</body>
</html>




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:
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;
   
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
   
    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
   
    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        },
        duration: 800,
        complete: function(){
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;
   
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
   
    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
   
    //show the previous fieldset
    previous_fs.show();
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        },
        duration: 800,
        complete: function(){
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})

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

Rikku

Utente Senior
8 Luglio 2007
1.901
24
40
25
Messina
Miglior risposta
0
#2
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.
 
Shoutbox
  1. #KiK #KiK: we mon friendz
  2. K keepout00: ue strunz
  3. Keep-out Keep-out: vbullettin state of mind
  4. Keep-out Keep-out: ci vorrebbe una skin un pò più old school, sarà che sono rimasto al 2009 ma con questa mi perdo ahah
  5. Keep-out Keep-out: hola
  6. Slimy Slimy: Buonasera
  7. Mavio Mavio: Habbo sta creando un nuovo "gioco", con nuovi aggiornamenti, a dirlo è stesso la pagina ufficiale di habbo su instagram
  8. INFINITY987 INFINITY987: muore
  9. UNI▼ERS▲L UNI▼ERS▲L: Che fine farà Habbo ora che il supporto di Adobe Flash Player cesserà?
  10. #KiK #KiK: weeeeee
  11. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  12. eskereboyz eskereboyz: https://www.sciax2.it/forum/threads/account-habbo.700424/
  13. DarkKB DarkKB: @999k https://www.sciax2.it/forum/threads/new-luxworld.700391/
  14. 999k 999k: https://www.sciax2.it/forum/threads/ihabbon-project.700336/
  15. 999k 999k: Retro innovativi ne abbiamo?
  16. JaxosItalia JaxosItalia: https://www.sciax2.it/forum/threads/jaxos-hotel.700052/
  17. DarkKB DarkKB: https://www.sciax2.it/forum/threads/new-luxworld.700391/
  18. #KiK #KiK: Amiciiiii
  19. Mr. Aizen Mr. Aizen: Buondì
  20. F FulmineVerde: https://www.sciax2.it/forum/threads/aumentare-prestazioni-del-pc.700408/
  21. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  22. TokosRetro TokosRetro: Salve
  23. -Marco -Marco: Ciao bellissimi!
  24. #KiK #KiK: Siiii
  25. Cristoforo58 Cristoforo58: Kaffeee?!1!1!11 @#KiK
Top