Forum PHP.pl > [JavaScript]Dynamiczne pola formularza + walidacja pól = dziwne cachowanie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Dynamiczne pola formularza + walidacja pól = dziwne cachowanie

Elber

4.03.2012, 00:02:27

Witam,

mam problem, mam formularz który po wybraniu selecta bez przeładowania strony wysyła info do pliku php i odbiera dodatkowe pola do tego formularza. Próbuję teraz napisać prostą funkcję w JS która sprawdzi czy jest dane pole i jak jest czy jest puste, jak jest puste to alert ... ale dzieją się dziwne rzeczy, otóż np.

Wybieram coś z selekta i dostaje pole a, b i c klikam żeby sprawdziło i wyskakuje że pola są puste, zmieniam selecta stare pola się usuwają i dostaje zamiast nich pola d, e, f klikam żeby sprawdziło i teraz pola a,b,c,d,e,f są puste ... tylko że ich już nie ma i nie powinno tego pokazać ;/ Czym to jest spowodowane ?

Pola sprawdzam w ten sposób:

Kod

if(field.pole_a && field.pole_a.value == ""){
alert('Pole a jest puste');
}

field(to zmienna z zawartością formularza)

wNogachSpisz

4.03.2012, 00:28:03

Są cyrki z pobieraniem wartości niektóych pól formularza, np, textarea.
Mi zawsze dopomaga jQuery.val()

Elber

4.03.2012, 09:17:18

Ja w formularzu mam tylko INPUTy i SELECTy

mówisz, żeby zmienić

if(field.pole_a && field.pole_a.value == ""){
alert('Pole a jest puste');
}

na

if($('pole_a') && $('pole_a').val() == ""){
alert('Pole a jest puste');
}

EDIT:

Nie pomaga ;/

zegarek84

4.03.2012, 09:41:05

Przypięty: [JavaScript] - jeśli Twój wątek go dotyczy, KONIECZNIE przeczytaj
A Ty nawet nie dałeś kodu JS tylko w zasadzie skrót myślowy...

Elber

4.03.2012, 09:48:10

Kod JS:

Kod

Przycisk Waliduj:

<input type="button" onClick="ValidForm();" value="Waliduj" />

A tutaj funkcja która po zmianie selecta pobiera do div'a konkretne inputy:

Kod

$("#selects").change(function(){
                $('#data').html('');
                if(selects.value != '-'){
                    $.post("plik.php", {select: ""+selects.value+""}, function(data){
                        if(data.length > 0){
                            $('#data').html(data);
                        }
                    });
                } else {
                    $('#data').html('');
                }
            });

zegarek84

4.03.2012, 11:05:54

rzeczywiście element jest gdzieś keszowany (w firebugu nie znalazłem gdzie to jeszcze siedzi) choć go nie ma w drzewie DOM - i właśnie tutaj masz rozwiązanie a jQuery wyżej źle urzywałeś...

by sprawdzić czy w znalezionym formularzu jest w drzewie DOM element o okreslonym atrybucie name możesz w czystym js wyszukać:
ff.querySelector('[name=pole_a]'); // zwróci element lub null
w jQ można to zapisać w ten sposób:
$('[name=pole_a]', field);
gdzie drugi argument oznacza kontekst wyszukiwania... jednak nawet jeśli tablica będzie pusta, to konwersja obiektu jQ do wartości bool zawsze zwróci true...
a więc po prostu musisz sprawdzać własność length gdzie 0 zostanie skonwertowane do false a każda inna wartość na true lub sprawdzaj pierwszy element jQ gdzie jeśli go nie ma zwróci undefined a jeśli jest zwróci Ci element;
$('[name=pole_a]', field).length; // liczba znalezionych elementów
$('[name=pole_a]', field)[0]; // pierwszy element tablicy...

Elber

4.03.2012, 11:10:32

Hmm

Dzięki, ale nie rozumiem jak ulożyć if'a który sprawdzi czy jest element i czy jest pusty ;(

if(($('[name=pole_a]', field)) && ($('[name=pole_a]', field).length > 0))

tak to powinno wyglądać

Oki metodą prób i błędów wyczaiłem że tak działa:

if(($(\'[name=pole_a]\', field)) && ($(\'[name=pole_a]\', field).val() == "")){
...
}

Tak jest poprawnie ?

zegarek84

4.03.2012, 11:22:30

niemal dobrze ale ucz się dobrych praktyk i nie szukaj po kilka razy tego samego w drzewie DOM
zapisz sobie wyszukiwanie do zmiennej np.
var jQ_inputs = $('[name=pole_a]', field);
i potem tą zmienną możesz wykożystać...
a dalej pierwszy element tablicy jest elementem drzewa DOM a nie obiektem jQ więc możesz sobie to wyszukiwanie zapisać do zmiennej (zapominając powyższe):
var input = $('[name=pole_a]', field)[0]; // albo będzie element albo undefined
i teraz tak jak robiłeś możesz gdyż masz element drzewa DOM:
if( input && input.value === "") {}

ale jeszcze w skrócie każdy pusty ciąg konwertuje się do false (ciąg ze spacją nie jest pusty ;p)
więc
var sMy = "";
!!sMy === false; // false - a więc !sMy === true
skrócony warunek:
if( input && !input.value) {}

Elber

4.03.2012, 11:29:11

Dzięki za wyjaśnienia i porady

Własnie przypisuje pola do zmiennych (nie pomyślałem wcześniej o tym

)

A czemu masz
pole_a === "" a nie pole_a == ""

zegarek84

4.03.2012, 11:33:38

jest szybszy i dokładniejszy
http://www.doman.art.pl/kursjs/kurs/operat...html#porownania

ps.
w ifie sprawdzenie tego $('[name=pole_a]', field) nic Ci nie da gdyż nawet pusty obiekt jQ konwertuje się do true - musisz sprawdzić albo length albo pierwszy element tablicy... oczywiście jak widzę sprawdzenie tego jest widocznie w jQuery skoro wystarczyło skożystać z metody .val() - a więc de fakto o tych sprawdzeniach o których pisałem tutaj możesz zapomnieć - jednak pamiętaj o nich gdyż przyda Ci się to w innych sytuacjach ;]

Elber

4.03.2012, 11:37:58

Zrobiłem tak jak radziłeś:

Kod

var pole_a = $(\'[name=pole_a]\', field)[0];

                        if(pole_a && pole_a.value === ""){
                            message +="Pole a jest puste !\n";
                        }

Dzięki wielkie za pomoc

Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.