Waliduje w locie pole forularza w taki sposób
<div class="rejestracja">
<form>
<table>
<tr>
<td colspan="3" id="naglowek">
<label>
Dane osobowe
</label>
</td>
</tr>
<tr>
<td id="lewe">
<label>Imię: </label>
</td>
<td>
<input type="text" id="imie" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td id="lewe">
<label>Nazwisko: </label>
</td>
<td>
<input type="text" id="nazwisko" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td colspan="3" id="naglowek">
<label>
Dane kontaktowe
</label>
</td>
</tr>
<tr>
<td id="lewe">
</td>
<td>
<input type="text" id="mail" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td id="lewe">
<label>Nr telefonu: </label>
</td>
<td>
<input type="text" id="telefon" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td colspan="3" id="naglowek">
<label>
Adres doręczeń
</label>
</td>
</tr>
<tr>
<td id="lewe">
<label>Ulica i nr mieszkania: </label>
</td>
<td>
<input type="text" id="ulica"/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td id="lewe">
<label>Kod pocztowy: </label>
</td>
<td>
<input type="text" id="kod" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td id="lewe">
<label>Miasto: </label>
</td>
<td>
<input type="text" id="miasto" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td colspan="3" id="naglowek">
<label>
Dane logowania
</label>
</td>
</tr>
<tr>
<td id="lewe">
<label>Login: </label>
</td>
<td>
<input type="text" id="login" disabled/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td id="lewe">
<label>Hasło: </label>
</td>
<td>
<input type="password" id="haslo" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td id="lewe">
<label>Powtórz hasło: </label>
</td>
<td>
<input type="password" id="haslo2" zwalidowane=""/>
</td>
<td id="validation">
</td>
</tr>
<tr>
<td colspan="3" id="rejestruj">
<label>
Rejestruj
</label>
</td>
</tr>
</table>
</form>
</div>
<script>
$("div.rejestracja :input").bind("keyup change", function () {
if ($(this).attr('id') == 'imie' || $(this).attr('id') == 'miasto' || $(this).attr('id') == 'nazwisko') {
var Reg = /^[a-zA-Z]{2,}$/;
var validate = $(this).val();
waliduj(validate, Reg, $(this));
}
if ($(this).attr('id') == 'mail') {
var Reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var validate = $(this).val();
waliduj(validate, Reg, $(this));
if(validate==''){
$(this).parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/no.PNG")'});
$(this).attr('zwalidowane','');
}
$('div.rejestracja input#login').val(validate);
}
if ($(this).attr('id') == 'kod') {
var Reg = /[0-9]{2}-[0-9]{3}/g;
var validate = $(this).val();
waliduj(validate, Reg, $(this));
}
if ($(this).attr('id') == 'telefon') {
var Reg = /^\d{9,}$/;
var validate = $(this).val();
waliduj(validate, Reg, $(this));
}
if ($(this).attr('id') == 'haslo') {
var Reg = /^[A-Z]{1}[a-z0-9]{5,9}$/;
var validate = $(this).val();
waliduj(validate, Reg, $(this));
}
if ($(this).attr('id') == 'haslo2') {
var Reg = /^[A-Z]{1}[a-z0-9]{5,9}$/;
var validate = $(this).val();
var ok = waliduj(validate, Reg, $(this));
if (validate == $('div.rejestracja #haslo').val() && ok==true) {
$(this).parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/yes.PNG")'});
$(this).attr('zwalidowane','true');
} else {
$(this).parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/no.PNG")'});
}
}
});
$('div.rejestracja #rejestruj').click(function(){
$
('div.rejestracja input[zwalidowane]').each(function(){ if($(this).attr('zwalidowane')!=''){
alert('wypelnij wszystkie pola');
}
});
});
function waliduj(x, y, z) {
if (!y.test(x)) {
z.parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/no.PNG")'});
z.attr('zwalidowane','');
} else {
z.parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/yes.PNG")'});
z.attr('zwalidowane','true');
return ok=true;
}
}
</script>
Po tym jak poprawie zwaliduje pole nadaje elemntowi html wartosc argumentu zwalidowane=true;
Po kliknięciu w przycisk Rejestruj zczytuje po kolei czy wszystkie wartosci zwaliduje są na true, jesli tak to przesyla formularz.
Tylko to słabe rozwiązanie bo z poziomu przeglądarki można to z ręki zmienić wartość alementu html i blędnei przesłąc forularz.
Próbowałem jakąś zmienna zadeklarować która trzymałą by wartosći które elementy są poprawnie zwalidowane ale nie dałem rady. Może ktoś podsunie pomysł jak to zrobić?