Próbuję trzeci dzień ugryźć temat i mi nie wychodzi więc postanowiłem napisać. Napisałem już chyba z 10 wersji i tylko 1 mi dobrze zadziałała, ale nie jestem zadowolony z kodu.
Generalnie mam prosty formularz:
<input type="text" class="jRequired jAlfanumStrict">
<input type="text" class="jRequired">
Oraz mam kod jQuery:
function jRequired(val)
{
if( val=='' )
return false;
else
return true;
}
function jAlfanumStrict(val)
{
if( val.match(/[^a-zA-ZąężźćśłóńŻŹĆŚŁÓĘĄŃ0-9\.\_]/) )
return false;
else
return true;
}
//jesli pole jest puste odpal funkcje error, jesli nie usun error
$('form').on('blur','.jRequired',function(){
if( !jRequired( $(this).val() ) )
error($(this),'To pole nie moze byc puste');
else
remove_error($(this))
});
//jesli w polu sa trefne znaki daj error, jesli nie to go usun
$('form').on('blur','.jAlfanumStrict',function(){
if( !jAlfanumStrict( $(this).val() ) )
error($(this),'To pole moze byc tylko alfanumeryczne');
else
remove_error($(this))
});
//jezeli za elementem nie ma spana to utworz span z komunikatem bledu, jesli jest to daj do niego komunikat
function error(input,kom)
{
if( !$(input).next().is('span') )
$(input).addClass('err_input')
.after('<span class="err_msg" style="display: none">'+kom+'</span>')
.next().fadeIn(200);
else
$(input).addClass('err_input').next().html(kom);
}
//jezeli za elementem jest span to go usun
function remove_error(input)
{
$(input).removeClass('err_input');
if( $(input).next().is('span') )
$(input).next().fadeOut(200, function(){ $(this).remove() });
}
Czyli chcę mieć w jQury rózne funkcje odpowiedzialne za walidację i tylko podpinać odpowiednie klasy do elementów. Wszystko jest ok, gdy podepnę tylko jedną klasę do każdego elementu, ale gdy robie class="jRequired jAlfanumStrict" komunikat znika. Wiem, czemu się tak dzieje (funkcja jRequired wykrywa, że pole jest puste i daje komunikat, nasptępnie jest odpalana funkcja jAlfanumStrict, która stwierdza, że z jej punktu widzenia jest wszystko ok i ten komunikat usuwa). Pytanie: jak rozwiązać ten problem, żeby funkcje działały niezależnie?
Poniżej wklejam działającą funkcję, ale jak pisałem niespecjalnie jestem zadowolony z kodu (a może niepotrzebnie?)
$('form').on('blur','input[type="text"]',function(){
var kom='';
if( $(this).is('[class~="jRequired"]') && !jRequired($(this).val()))
kom='Musisz wypełnić to pole';
if( $(this).is('[class~="jAlfanumStrict"]') && !jAlfanumStrict($(this).val()))
kom='Niedozwolone znaki. Dozwolone są litery małe, duże, liczby, podkreślnik i kropka';
if(kom!='')
error($(this),kom);
else
remove_error($(this));
});