Problem z walidacją formularza w jQuery

Dla specjalistów Webmastering
#1

Witam, mam problem z walidacją formularza. Oto kod

$(function() {
var username_input = $(’#username’),
email_input = $(’#email’),
password_input = $(’#password’),
password_again_input = $(’#password_again’),
username_valid = $(’.username-valid-info’),
email_valid = $(’.email-valid-info’),
password_valid = $(’.password-valid-info’),
password_again_valid = $(’.password-again-valid-info’);

$(‘form’).on(‘submit’, function() {
if(username_input.val() == ‘’ && email_input.val() == ‘’ && password_input.val() == ‘’ && password_again_input.val() == ‘’) {
username_valid.slideDown(200).text(‘Musisz podać swoje imie.’);
email_valid.slideDown(200).text(‘Musisz podać swój adres email.’);
password_valid.slideDown(200).text(‘Musisz podać swoje hasło.’);
password_again_valid.slideDown(200).text(‘Musisz powtórzyć hasło.’);
return false;
} else if(username_input.val() == ‘’) {
return false;
} else if(email_input.val() == ‘’) {
return false;
} else if(password_input.val() == ‘’) {
return false;
} else if(password_again_input.val() == ‘’) {
return false;
} else if(password_again_input.val() != password_input.val()) {
return false;
} else if(username_input.val().length < 3) {
return false;
} else if(username_input.val().length > 16) {
return false;
} else if(password_input.val().length < 6) {
return false;
} else if(password_input.val().length < 18) {
return false;
}
});

username_input.on(‘blur’, function(){
if(username_input.val() == ‘’) {
username_valid.slideDown(200).text(‘Musisz podać swoje imie.’);
} else if(username_input.val().length < 3) {
username_valid.slideDown(200).text(‘Imię, które podałeś jest zbyt krótkie.’);
} else if(username_input.val().length > 16) {
username_valid.slideDown(200).text(‘Imię, które podałeś jest zbyt długie.’);
} else {
username_valid.css(‘display’, ‘none’);
}
});

email_input.on(‘blur’, function(){
if(email_input.val() == ‘’) {
email_valid.slideDown(200).text(‘Musisz podać swój adres email.’);
} else {
email_valid.css(‘display’, ‘none’);
}
});

password_input.on(‘blur’, function(){
if(password_input.val() == ‘’) {
password_valid.slideDown(200).text(‘Musisz podać swoje hasło.’);
} else if(password_input.val().length < 6) {
password_valid.slideDown(200).text(‘Hasło, które podałeś jest zbyt krótkie.’);
} else if(password_input.val().length > 18) {
password_valid.slideDown(200).text(‘Hasło, które podałeś jest zbyt długie.’);
} else {
password_valid.css(‘display’, ‘none’);
}
});

password_again_input.on(‘blur’, function(){
if(password_again_input.val() == ‘’) {
password_again_valid.slideDown(200).text(‘Musisz powtórzyć hasło.’);
} else if(password_again_input.val() != password_input.val()) {
password_again_valid.slideDown(200).text(‘Powtórzone hasło, różni się od oryginału.’);
} else {
password_again_valid.css(‘display’, ‘none’);
}
});

});

 

Tak naprawdę problem pojawił się wtedy, gdy zacząłem walidować ilość znaków w polach. Wcześniej wszystko było w porządku. Będę wdzięczny za pomoc.

#2

Nie wrzuciłeś pełnego kodu, który można uruchomić, więc może łaskawie opisałbyś objawy tego “problemu z walidacją formularza”? Zresztą to dobry zwyczaj w ogóle, coś co dla jednej osoby jest bugiem, dla innej może być funkcjonalnością.

#3

Chodzi o to, że gdy cały formularz wypełnie bez błędów, to i tak formularz się nie wykonuje. Tak jakby cały czas zwracało false. Ten problem pojawił się dopiero wtedy, gdy zacząłem sprawdzać ilość wpisanych liter do pola username i password.

#4 
else if(password_input.val().length < 6) {
    return false;
} else if(password_input.val().length < 18) {
    return false;
}

Tu masz prawdopodobny kiks, drugi warunek jest nadzbiorem pierwszego.

PS Błąd bierze się z tego, że masz bardzo zła technikę pisania kodu, gdyby do walidacji było 100 warunków, też byś takiego else-if’a naklepał? DRY.

PS2 Na tym przykładzie można też zobaczyć, że zawsze powinno się umieszczać opis problemu. Równie dobrze, mogłem nad tym przejść obojętnie, może po prostu twoim wymaganiem jest by użytkownik miał hasło dłuższe niż 18 znaków (co nie jest takie bezsensowne, biorąc pod uwagę jakie proste hasła tworzą ZU).

#5

Dziękuję, już działa. Ale czy mógłbyś mi podać linka do poradnika, gdzie jest zastosowana inna technika ?

#6

Dla JS, prawdopodobnie nic nie znajdę, ale Java też powinna być w miarę czytelna. Czytaj wszystkie posty, bo to nie SO, tylko CR. http://codereview.stackexchange.com/questions/35491/validation-class-to-avoid-ugly-if-else-blocks Jakby coś jest to tylko początek tego co można zrobić.