Witam serdecznie

Do tej pory korzystalem z wlasnych skryptow weryfikujacych poprawnosc
wypelnianego formularza po stronie uzytkownika. Pozniej przepuszczalem
wyslana tresc przez swoje skrypty napisane w php po stronie serwera.

Ale jako, ze na pewno nie sa to doskonale rozwiazania, a pisalem je kilka
lat temu, szukam jakiegos gotowca ktory przystawal by do dzisiejszych
wymogow.

Formularz prosty - ot imie i nazwisko, email i tresc wiadomosci.

Znacie cos co mozecie polecic do wykorzystania? Bo wywazac otwartych drzwi
nie zamierzam:)

Chodzi mi przede wszystkim o rozwiazania.. takie najbardziej przyjazne
uzytkownikowi. I dbajace takze o osoby niepelnosprawne.

Bardzo prosze o pomoc.



--
Pozdrawiam
Gabriel Zastawnik
http://www.sigsoft.pl - Monitoring Komputera

do góry

Myślę że w tej kwestii można zaufać PPK. Zapoznaj się z informacjami na
stronie http://www.quirksmode.org/js/forms.html

Koniecznie zapoznaj się także z innymi materiałami z jego strony, do
których znajdziesz odnośniki w tekście. Znajdziesz tam m.in. formularz
łudząco podobny do Twojego.

Przy okazji -- zdaje się że PPK o tym nie wspomina, ale do sprawdzania
elementów formularzy można także użyć zdarzenia blur (które następuje
gdy element traci ,,aktywność" -- znaczy użytkownik przeniósł swoją uwagę
na jakiś inny, np. klikając nań). Tylko wymaga to przemyślanej metody,
ponieważ każdy z elementów ma zawierać inne dane (możesz stworzyć
funkcję dla każdego z elementów lub też funkcję ogólną która będzie
przyjmowała element jako argument i na tej podstawie wykonywała
odpowiednie operacje; tak czy siak, dla rozbudowanych formularzy ilość
kodu może być całkiem pokaźna).

Oczywiście obsługa zdarzenia blur ma jedynie wspomagać już istniejące
mechanizmy, a nie je zastępować. Ogólnie sprawdzanie poprawności
formularza wygląda następująco:

1. Obsługa zdarzenia blur -- sprawdza czy użytkownik w ogóle wypełnił
wymagane pole, i/lub -- jeżeli wymaga ono jakichś specyficznych danych
(np. adresu e-mail) -- sprawdza czy użytkownik wpisał to czego się od
niego oczekuje w chwili, gdy użytkownik opuszcza dane pole.
2. Obsługa zdarzenia submit formularza (użytkownik może chcieć wysłać
formularz bez uprzedniego zainteresowania się wymaganymi polami, więc
nie będą one miały szansy wywołać zdarzenia blur).
3. Sprawdzenie poprawności formularza po stronie serwera i
ewentualne odesłanie go z wypunktowanymi błędami (na wypadek gdyby
użytkownik miał wyłączony JavaScript w przeglądarce).
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

Użytkownik "Mirosław Zalewski" <miniopl@CUT_THIS.gmail.com> napisał w
wiadomości news:20090114230931.1ebe8406@pingwin.place.you.dont.
want.to.be...
> Myślę że w tej kwestii można zaufać PPK. Zapoznaj się z informacjami na
> stronie http://www.quirksmode.org/js/forms.html [...]

Dziekuje bardzo
Zaraz sobie to wszystko sprawdze.




--
Pozdrawiam
Gabriel Zastawnik
http://www.sigsoft.pl - Monitoring Komputera

do góry

Użytkownik "Gabriel" <z...@p...fm> napisał w wiadomości
news:gkmipk$gdq$1@atlantis.news.neostrada.pl...
> Dziekuje bardzo
> Zaraz sobie to wszystko sprawdze.

Moge potwierdzic - niezwykle przydatny artykul.
Co wiecej - na podstawie zamieszczonych kodow zrodlowych (w ktorych jest
kilka bledow niestety, ale mozna je latwo wylapac) mozna napisac niezwykle
prosty i intuicyjny mechanizm sprawdzania roznego rodzaju formularzy.

Zdecydowanie polecam!



--
Pozdrawiam
Gabriel Zastawnik
http://www.sigsoft.pl - Monitoring Komputera

do góry

styczeń roku pamiętnego 2009, prawdopodobnie 22. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Gabriel:

> Co wiecej - na podstawie zamieszczonych kodow zrodlowych (w ktorych
> jest kilka bledow niestety, ale mozna je latwo wylapac)

Możesz napisać coś więcej? Nawet pal licho grupę, ale myślę że PPK
będzie bardzo zainteresowany ich poprawą.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

Użytkownik "Mirosław Zalewski" <miniopl@CUT_THIS.gmail.com> napisał w
wiadomości news:20090122211513.4dbe0f01@pingwin.place.you.dont.
want.to.be...
styczeń roku pamiętnego 2009, prawdopodobnie 22. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Gabriel:
> Możesz napisać coś więcej? Nawet pal licho grupę, ale myślę że PPK
> będzie bardzo zainteresowany ich poprawą.

Pewnie.
Wezmy kod ze strony http://www.quirksmode.org/dom/error.html
Ten interesowal mnie najbardziej.

Moj kod formularza:
<form action="send.php" method="post" id="formularz_pytania_uwagi"
onsubmit="return validate();">
<fieldset>
<legend>Formularz kontaktowy</legend>
<p> <label for="imie_nazwisko">imię i nazwisko:</label><br />
<input name="imie_nazwisko" id="imie_nazwisko" />
</p>
<p> <label for="email">adres email:</label><br />
<input name="email" id="email" />
</p>
<p> <label for="tresc_maila">treść wiadomości:</label><br />
<textarea name="tresc_maila" id="tresc_maila" rows="10"
cols="10"></textarea>
</p>
<input name="przycisk" type="submit" value="wyślij" class="przycisk" />
</fieldset>
</form>

Czyli - najprostszy z mozliwych.

Kod umieszczony na w/w stronie sprawdza kolejne elementy danego formularza
poczawszy od i=0 do liczby elementow zawartych w formularzu:
for (var i=0;i<x.length;i++) {
if (!x[i].value)
writeError(x[i],'This field is required');
}

Oznacza to, ze w przypadku formularza zrobionego ze znacznikiem fieldset,
ktory powinien byc umieszczony w tzw. uzytecznych i zgodnych ze standardami
formularzach, nigdy formularz nie bedzie poprawny. Bo element i=0 to wlasnie
fieldset.
Nalezy wtedy odliczac od i=1
No i po co sprawdzac element ostatni, czyli przycisk "wyslij" ?
Zatem odliczamy od i=1 do i=x.length-1

Kolejna poprawka dotyczy fragmentu:
if (!W3CDOM) alert(errorstring);

Autor po prostu wyszedl z zalozenia, ze jesli przegladarka nie obsluguje
modelu DOM, to powinien pojawic sie komunikat o bledzie.
A ja sie pytam - po co? Zeby Klient nie wyslal formularza? Powinien zostac
zwrocony true, zeby formularz poszedl, a jego obrobka w tym momencie powinna
zostac przejeta po stronie serwera.

Oczywiscie nie mozna tu mowic o bledzie sensu stricte, ale chociaz by w
wyjasnieniu mozna dac szerszy komentarz na ten temat.

To samo dotyczy kodu ze strony http://www.quirksmode.org/js/formex.html

Ale tak jak napisalem - poza takimi nielicznymi przypadkami, gdzie cos
samemu sobie trzeba dopracowac, to artykul jest rewelacyjny.



--
Pozdrawiam
Gabriel Zastawnik
http://www.sigsoft.pl - Monitoring Komputera

do góry

styczeń roku pamiętnego 2009, prawdopodobnie 22. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Gabriel:

> Oznacza to, ze w przypadku formularza zrobionego ze znacznikiem
> fieldset, ktory powinien byc umieszczony w tzw. uzytecznych i
> zgodnych ze standardami formularzach, nigdy formularz nie bedzie
> poprawny. Bo element i=0 to wlasnie fieldset.
> Nalezy wtedy odliczac od i=1

Generalnie masz rację. Chociaż ja, w celu zachowania większej ogólności
funkcji, po prostu sprawdzałbym czy elementem jest <fieldset> i --
jeżeli tak -- wywoływał kolejną iterację pętli:

if(x[i].nodeName == 'FIELDSET') continue;

Dzięki temu funkcja będzie identycznie działała zarówno dla tych
formularzy które <fieldset> zawierają, jak i tych którym go brak.

Chociaż, oczywiście, jeżeli ktoś jest pewien że zawsze wszystkie jego
formularze będą zawierały ten znacznik, może zaczynać iterację od
drugiego elementu.

> No i po co sprawdzac element ostatni, czyli przycisk "wyslij" ?
> Zatem odliczamy od i=1 do i=x.length-1

Myślę że to trochę czepianie dla czepiania ;) . Przycisk do wysyłania
zawsze ma wartość (value), więc żaden dodatkowy kod nie będzie dla
niego wykonany. Ewentualny wpływ na prędkość wykonywania kodu jest
raczej marginalny, a może i nawet niezmierzalny.

Choć rozumiem Twój argument, gdyż osobiście też lubię czepiać się
szczegółów ;) .

Ale... teraz mi przyszło do głowy -- przecież przycisk do wysyłania
formularza wcale nie musi być jego ostatnim elementem.

> Kolejna poprawka dotyczy fragmentu:
> if (!W3CDOM) alert(errorstring);
>
> Autor po prostu wyszedl z zalozenia, ze jesli przegladarka nie
> obsluguje modelu DOM, to powinien pojawic sie komunikat o bledzie.
> A ja sie pytam - po co? Zeby Klient nie wyslal formularza? Powinien
> zostac zwrocony true, zeby formularz poszedl, a jego obrobka w tym
> momencie powinna zostac przejeta po stronie serwera.

Już pisałem płomienną tyradę ;), kiedy zorientowałem się:
chodzi Ci o to, że alert jest uruchamiany bez względu na to, czy
,,errorstring" jest niepusty? Innymi słowy: jedynie na podstawie tego,
czy przeglądarka obsługuje model DOM? A przecież pomimo braku jego
obsługi, formularz może być wypełniony poprawnie.

Tylko, jeżeli się nie mylę, nie masz racji co do konsekwencji --
wywołanie alert() nie wpływa na zatrzymanie wysyłania formularza. W
przypadku gdy formularz będzie wypełniony poprawnie a przeglądarka nie
będzie obsługiwała modelu DOM, po kliknięciu <input type="submit">
pojawi się puste okienko. Po kliknięciu ,,ok" nastąpi normalne wysyłanie
formularza.

Jednak fakt faktem -- tego okienka nie powinno w ogóle być.

> Oczywiscie nie mozna tu mowic o bledzie sensu stricte, ale chociaz by
> w wyjasnieniu mozna dac szerszy komentarz na ten temat.

Właśnie spodziewałem się jakichś błędów w składni JS, pokroju
niedomkniętego nawiasu czy czegoś podobnego.

To jak -- wyślesz e-maila do PPK czy ja mam to zrobić? :)
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

Użytkownik "Mirosław Zalewski" <miniopl@CUT_THIS.gmail.com> napisał w
wiadomości news:20090122223029.55b0b734@pingwin.place.you.dont.
want.to.be...
styczeń roku pamiętnego 2009, prawdopodobnie 22. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Gabriel:

> Generalnie masz rację. Chociaż ja, w celu zachowania większej ogólności
> funkcji, po prostu sprawdzałbym czy elementem jest <fieldset> i --
> jeżeli tak -- wywoływał kolejną iterację pętli:
> if(x[i].nodeName == 'FIELDSET') continue;
> Dzięki temu funkcja będzie identycznie działała zarówno dla tych
> formularzy które <fieldset> zawierają, jak i tych którym go brak.

Rewelacyjny pomysl:)
Wezme wprowadze modyfikacje w swojej wersji skryptu.
Lubie ogolne rozwiazania.

> No i po co sprawdzac element ostatni, czyli przycisk "wyslij" ?
> Zatem odliczamy od i=1 do i=x.length-1
> Myślę że to trochę czepianie dla czepiania ;) . Przycisk do wysyłania
> zawsze ma wartość (value), więc żaden dodatkowy kod nie będzie dla
> niego wykonany. Ewentualny wpływ na prędkość wykonywania kodu jest
> raczej marginalny, a może i nawet niezmierzalny.

Oczywiscie. Masz pelna racje. Mimo wszystko jakos tak mi sie to nie
podobalo:)

> Ale... teraz mi przyszło do głowy -- przecież przycisk do wysyłania
> formularza wcale nie musi być jego ostatnim elementem.

W zasadzie racja.
Jedyne zatem, co by mozna bylo tu usprawnic, to wykrywanie przycisku submit
Ale to juz czepianie dla czepiania, wiec mozna jedynie o tym wspomniec w
komentarzu do kodu.

> Jednak fakt faktem -- tego okienka nie powinno w ogóle być.
O to mi chodzilo wlasnie - o uniezaleznienie dzialania skryptu od tego czy
przegladarka obsluguje, czy nie obsluguje DOM.
Bo jesli nie obsluguje - to powinno sie od razu puscic formularz dalej do
serwera i sprawdzic go po stronie cgi.
Co bowiem mozna madrego napisac w tym alercie? "Niestety nie dalismy rady
sprawdzic poprawnosci wypelnienia formularza, bo Twoja przegladarka costam
nieteges" ?;) Wogole IMO jakikolwiek alert w tym miejscu bedzie zly.

> Właśnie spodziewałem się jakichś błędów w składni JS, pokroju
> niedomkniętego nawiasu czy czegoś podobnego.
Nie. Tu akurat wszystko ok.

> To jak -- wyślesz e-maila do PPK czy ja mam to zrobić? :)

Jezeli mozesz - to wyslij.
Nie czuje sie kompetentny na tyle, by zwracac komus uwage na te rzeczy.


--
Pozdrawiam
Gabriel Zastawnik
http://www.sigsoft.pl - Monitoring Komputera

do góry

styczeń roku pamiętnego 2009, prawdopodobnie 22. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Gabriel:

> > Generalnie masz rację. Chociaż ja, w celu zachowania większej
> > ogólności funkcji, po prostu sprawdzałbym czy elementem jest
> > <fieldset> i -- jeżeli tak -- wywoływał kolejną iterację pętli:
> > if(x[i].nodeName == 'FIELDSET') continue;
>
> Rewelacyjny pomysl:)
> Wezme wprowadze modyfikacje w swojej wersji skryptu.
> Lubie ogolne rozwiazania.

:)

To jeszcze dwie uwagi. Ale zaznaczam że nie jestem ich pewien i przed
ich wprowadzeniem należałoby sprawdzić czy są one uzasadnione.

Po pierwsze, gdyby jakaś przeglądarka zwróciła nodeName nieskładające
się z samych majuskuł, element ten -- pomimo bycia <fieldset> -- nie
zostałby pominięty. Dlatego można rozważyć jeszcze wykonywanie
metody toUpperCase() na otrzymanym ciągu w celu upewnienia się, że
wielkość znaków nie wpłynie na porównywanie. Ale jeżeli specyfikacja
nakazuje aby nodeName zawierało tylko wielkie litery i wszystkie
popularne przeglądarki tak robią, nie jest to konieczne.

Po drugie, jeżeli <fieldset> może być tylko i wyłącznie pierwszym
dzieckiem <form>, to zamiast sprawdzać wszystkie elementy czy są
fieldset, można to sprawdzić jeszcze przed iteracją.

var i = (x[0].nodeName == 'FIELDSET) ? Number(1) : Number(0);
for (i; i< x.length; i++) { // i tak dalej

Jeżeli jednak <fieldset> może wystąpić gdziekolwiek w formularzu, taka
poprawka wprowadzi tylko błąd. Ja nie sprawdzałem, ale pewnie
specyfikacja HTML o tym wspomina.

> Jedyne zatem, co by mozna bylo tu usprawnic, to wykrywanie przycisku
> submit Ale to juz czepianie dla czepiania, wiec mozna jedynie o tym
> wspomniec w komentarzu do kodu.

Nie jestem pewien czy można w tym kontekście użyć słowa ,,usprawnić" ;) .

> Co bowiem mozna madrego napisac w tym alercie? "Niestety nie dalismy
> rady sprawdzic poprawnosci wypelnienia formularza, bo Twoja
> przegladarka costam nieteges" ?;) Wogole IMO jakikolwiek alert w tym
> miejscu bedzie zly.

Nie nie, model DOM jest wykorzystywany tylko do poinformowania
użytkownika o niepoprawnie wypełnionym formularzu. Sprawdzanie owej
poprawności odbywa się niezależnie od niego.

Idea jest taka -- jeżeli przeglądarka obsługuje model DOM, dynamicznie
tworzymy informacje o błędach przy samych polach formularza. Jeżeli
nie, używamy alert(). Jest to funkcja tak podstawowa, że chyba nie
istnieje przeglądarka z JS która by jej nie obsługiwała.

> > To jak -- wyślesz e-maila do PPK czy ja mam to zrobić? :)
>
> Jezeli mozesz - to wyslij.
> Nie czuje sie kompetentny na tyle, by zwracac komus uwage na te
> rzeczy.

Oj tam ,,kompetentny" -- każdy może się pomylić, niezależnie od poziomu
swojej wiedzy. A ,,guru" jest chyba wystarczająco inteligentny, by o tym
wiedzieć.

Chyba że chodziło o kompetencje językowe.

Niemniej ok -- zaraz przekażę PPK Twoje uwagi.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

Użytkownik "Mirosław Zalewski" <miniopl@CUT_THIS.gmail.com> napisał w
wiadomości news:20090122231913.622c6da7@pingwin.place.you.dont.
want.to.be...

> Oj tam ,,kompetentny" -- każdy może się pomylić, niezależnie od poziomu
> swojej wiedzy. A ,,guru" jest chyba wystarczająco inteligentny, by o tym
> wiedzieć.

:)
No to jak juz tak modyfikujemy, to nie zapomnimy o polach typu hidden,
ktorych nie powinnismy rowniez sprawdzac pod wzgledem poprawnosci
zawartosci.
W 99% przypadkow umieszczone sa celowo i mogą w pewnych okolicznosciach nie
byc wypelnione.

> Chyba że chodziło o kompetencje językowe.

Nie. Z tym bym sobie poradzil:) Ogolnie chodzilo mi o to, ze javascript
uzywam okazjonalnie i o ile jestemn w stanie zrozumiec skrypty i w jakims
stopniu samodzielnie przystosowywac je do tego by dzialaly, to sam raczej
nic w tym jezyku nie pisze.

> Niemniej ok -- zaraz przekażę PPK Twoje uwagi.

_nasze_ jak juz cos:)
Bo na pewno nie tylko moje.


--
Pozdrawiam
Gabriel Zastawnik
http://www.sigsoft.pl - Monitoring Komputera

do góry