[JavaScript]JQuery walidacja Opcje

[kamilo818]

Waliduje w locie pole forularza w taki sposób

[PHP] pobierz, plaintext 
<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">
                    <label>e-mail: </label>
                </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>
[PHP] pobierz, plaintext 

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ć?

[Damonsson]

Każda walidacja po stronie klienta, to tylko ukłon w stronę użytkownika i umilenie mu korzystania z aplikacji, nic więcej. Nie ma to nic wspólnego z realną walidacją danych przychodzących, od tego jest PHP.

[kamilo818]

Rozumiem. Ale nie jest wystarczające jesli ponownie po naciśnięciu przycisku rejestruj pobiore wartości i je zwaliduje w jquery i prześle do bazy? Czy to gorsze od walodacji w php ? Czym moze grozić jakie rozwiazanie?

[tzm]

Nie o to chodzi...
w jQuery możesz sobie walidować dowoli żeby na bierząco informować ( przed wysłaniem formularza ) użytkownika czy wpisane dane są poprawne.
Ale potem i tak to musisz przepuścić przez walidację w PHP z tego powodu że:
a) javascript można wyłączyć.
javascript bardzo łatwo można edytować. ostatnio pisałem funkcję do blokowania ataków xss w czacie, kumplowi pokazałem kod do oceny i rozwalił serwer..
Javascript to dodatek do robienia stron póki co i tego się trzymaj jak nie chcesz mieć problemów z chamskimi użytkownikami.

[kamilo818]

Dzięki. Wszystko jasne.