No to tak jest przecież "w standardzie", co ci tu nie działa?
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="#">
<input type="text" name="name" required>
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
Dobrze. To zacznijmy od początku.
Są cztery formularze:
<ul id="progressbar">
<li class="active">Krok pierwszy</li>
<li>Krok drugi</li>
<li>Krok trzeci</li>
<li>Krok czwarty</li>
</ul>
**Pierwszy: **
Przywitanie z przyciskiem Rozumiem:
<fieldset>
<h2 class="fs-title">Krok pierwszy</h2>
<h3 class="fs-subtitle">Przywitanie</h3>
<input type="button" name="next" class="next action-button" value="Rozumiem" />
</fieldset>
Drugi
<fieldset>
<h2 class="fs-title">Krok drugi</h2>
<h3 class="fs-subtitle">Weryfikacja email</h3>
<input type="email" name="email" required>
<input type="button" name="previous" class="previous action-button" value="Cofnij" />
<input type="button" name="next" class="ostatni action-buttons" value="Dalej" />
</fieldset>
Trzeci
<fieldset>
<h2 class="fs-title">Krok trzeci</h2>
<h3 class="fs-subtitle">Podaj imię i nazwisko</h3>
<input type="email" name="imie">
<input type="email" name="nazwisko">
<input type="button" name="previous" class="previous action-button" value="Cofnij" />
<input type="button" name="next" class="ostatni action-buttons" value="Dalej" />
</fieldset>
Czwarty
<fieldset>
<h2 class="fs-title">Krok czwarty</h2>
<h3 class="fs-subtitle">Dziękujemy za podanie danych!</h3>
</fieldset>
I tak wygląda cały formularz dotyczący danych.
Kod pozawalajacy przejść na następną stronę wygląda tak:
$(".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'
});
});
A na poprzednią tak:
$(".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'
});
});
Opis ogólny:
Pierwszy formularz, trzeci oraz czwarty działają okej.
Problem jest z formularzem drugim ponieważ chciałbym aby działał on tak:
Jeżeli pole email jest puste, lub zawarty w nim email jest niepoprawny (np brakuje @) to nie pozwól przejść do formularza trzeciego tylko wyświetl te podpowiedzi.
Bo teraz to działa tak, że jeżeli nie wpiszę nic i klikne dalej to normalnie przejdę do kroku trzeciego, gdzie podczas zmieniania się z formy drugiej na trzecią wyskakuje "wypełnij to pole" ale w niczym ono nie przeszkadza i można kontynuować wypełnianie formularza.
Zaś jeśli wpiszę poprawnego e-maila to przekierowuje mnie do kroku pierwszego, zamiast do trzeciego.
Pozdrawiam