JavaScript: Prosta walidacja formularzy

Walidacja błędnych danych formularzy po stronie przeglądarki jest bardzo dobrym pomysłem, który zaoszczędza czas odwiedzających nasze strony. Przyjrzyjmy się, jak uzyskać tego typu efekt za pomocą JavaScriptu.

Przyjmijmy, że mamy formularz z polami na wpisanie nicka ({html}
{/html}) oraz treści – {html}{/html}. Naszym zadaniem jest sprawdzenie, czy po wciśnięciu przez użytkownika przycisku Dodaj wartości poszczególnych pól zostały uzupełnione prawidłowo. </p> <p class="n">Pierwszym krokiem w tym celu będzie sprawdzenie, czy użytkownik uzupełnił każde wymagane pole. Jeśli jakiś element formularza będzie pusty, zablokujemy wysyłanie formularza i wyróżnimy czerwoną obwódką pole, w którym skrypt napotka błąd.</p> <h3 class=\"n\">Dokument HTML<br /> </h3> <p class="n">Stworzymy przykładowy dokument HTML, który<br /> zobrazuje to zagadnienie – patrz listing 1. </p> </p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </pre> </td> <td class="code"> <pre class="html" style="font-family:monospace;"><!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\"> <head> <title>Strona z formularzem</title> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" /> <style type=\"text/css\"> label { display: block; margin: 2px; } </style>  <script type=\"text/javascript\"></script> </head> <body> <form method=\"post\" action name=\"dodawanie_posta\"> <label>Nick: <input type=\"text\" name=\"nick\" value /></label> <label>Tresc <textarea name=\"content\" rows=\"5\" cols=\"20\"></textarea></label> <input type=\"submit\" value=\"dodaj\" /> </form> </body> </html></pre> </td> </tr> </table> </div> <p> Jak widać na rysunku, nie ma tutaj żadnych udziwnień<br /> - dwa pola, przycisk submit. Formularz jest<br /> nazwany {stala}dodawanie_posta{/stala}. </p> <div class="ramka_1 ramka_100"> <p>{html}var formularz = document.forms['nazwa_formularza'];{/html}</p> <p>Dzięki takiej konstrukcji możemy dostać się do określonego formularza i jego wszystkich elementów.<br /> Pomiędzy nawiasami kwadratowymi wpisujemy wartość atrybutu name interesującego nas formularza.<br /> Jak widać, mamy do czynienia z kolejnym przykładem rodzica i dziecka. Rodzicem jest cały dokument<br /> HTML (document), a dzieckiem formularze (.forms).</p> <p>Do określonego formularza możemy również dostać się wpisując w nawiasy kwadratowe numer porządkowy formularza. Jeśli formularz, który jest przedmiotem naszego zainteresowania, występuje<br /> w dokumencie jako pierwszy, to możemy zastosować zapis {html}document.forms[0]{/html}. Użyliśmy zera, ponieważ w informatyce liczymy od zera. </p> </div> <h3>Zdarzenie onsubmit<br /> </h3> <p>Chcemy sprawdzić, czy użytkownik wprowadził<br /> poprawne dane po wciśnięciu przycisku submit. Oczywiście dysponując samym CSS-em<br /> i HTML-em nie jesteśmy w stanie tego zrobić.<br /> Z pomocą przychodzi kolejne zdarzenie Java-<br /> Script. Wiemy już, jak wykryć czy użytkownik<br /> naprowadził wskaźnik mysz na dany element<br /> ({stala}onmouseover{/stala}) lub czy go kliknął ({stala}onclick{/stala}). Podobnie<br /> postąpimy z formularzem, a mianowicie<br /> wychwycimy moment, kiedy użytkownik wyśle<br /> formularz przyciskiem Dodaj. Pomoże w tym<br /> zdarzenie{stala}onsubmit{/stala}. </p> <div class="ramka_1 ramka_100"> <p><b>Onsubmit</b> to zdarzenie charakterystyczne dla<br /> formularzy, które pozwala wykryć po stronie<br /> przeglądarki moment, kiedy dany formularz<br /> jest wysyłany.</p> </div> <p> Najpierw jednak zbudujmy funkcję {stala}Laduj{/stala}, która<br /> po załadowaniu dokumentu sprawi, że nasz formularz<br /> będzie miał ustawioną właściwość {stala}onsubmit{/stala},<br /> odsyłającą do jakiejś funkcji, dajmy na to Verify. </p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #339933;"></span> <span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span>\<span style="color: #3366CC;">"text/javascript<span style="color: #000099; font-weight: bold;">\"</span>> window.onload = Laduj; function Laduj() { } function Verify() { } </script></span></pre> </td> </tr> </table> </div> <p> Nakazaliśmy, aby za każdym wywołaniem<br /> strony na początku wykonała się funkcja {stala}Laduj{/stala}.<br /> Musi ona dać znać formularzowi, że po jego<br /> wysłaniu ma wykonać się funkcja Verify sprawdzająca<br /> poprawność wpisanych danych. Problem<br /> w tym, jak dostać się do formularza, kiedy nie<br /> mamy jego id (wtedy użylibyśmy {html}document.getElementById(){/html}, ale tutaj, umyślnie, nie chcemy tego).<br /> Na to też jest sposób! </p> <h3>Odnoszenie się do formularzy w JavaScript<br /> </h3> <p>Należy odwołać się do całego dokumentu i jego<br /> potencjalnych dzieci. Jak pamiętamy, możliwe<br /> było użycie: {stala}document.body{/stala}, więc dlaczego nie<br /> wykorzystać podobnej konstrukcji w przypadku<br /> formularzy?</p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> Laduj<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> document.<span style="color: #660066;">forms</span><span style="color: #009900;">[</span>\<span style="color: #3366CC;">'dodawanie_posta<span style="color: #000099; font-weight: bold;">\'</span>].onsubmit = Verify; }</span></pre> </td> </tr> </table> </div> <p>W ten sposób zamiast używać identyfikatora<br /> formularza, skorzystaliśmy z jego atrybutu name<br /> o wartości dodawanie_posta.</p> <p>Wracając do naszego przykładu, należy teraz<br /> zdefiniować, za co odpowiedzialna będzie funkcja<br /> Verify, która wywoływana jest po wciśnięciu<br /> dodaj. Otóż najpierw powinna pobrać wartości<br /> wszystkich pól.</p> <p>Następnie musimy sprawdzić, czy<br /> nie są one puste. Jeśli będzie inaczej, ustawiamy<br /> {html}style.border = „2px solid #FF0000″;{/html} elementowi<br /> formularza, który nie został wypełniony. Można<br /> też wyświetlić okienko informacyjne alert();<br /> o tym, że coś nie zostało wpisane. </p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> Verify<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #003366; font-weight: bold;">var</span> nick <span style="color: #339933;">=</span> document.<span style="color: #660066;">forms</span> <span style="color: #009900;">[</span>\<span style="color: #3366CC;">'dodawanie_posta<span style="color: #000099; font-weight: bold;">\'</span>].nick.value; var content = document.forms [<span style="color: #000099; font-weight: bold;">\'</span>dodawanie_posta<span style="color: #000099; font-weight: bold;">\'</span>].content.value; var error = false; }</span></pre> </td> </tr> </table> </div> <p>Przeanalizujmy teraz kawałek, który będzie rozpoczynał<br /> działanie funkcji. Zmienna nick pobiera<br /> wartość pola input o {stala}name=”nick”{/stala}. Ze zmienną<br /> content jest podobnie, tyle że jej wartość pobierana<br /> jest z textarea o {stala}name=”content{/stala}”. Zmienna error<br /> ma wartość false, co oznacza fałsz. Jej wartość<br /> zostanie zmieniona na prawdę (true), kiedy nasz<br /> skrypt napotka jakieś puste pole formularza. </p> <p>Zmienna ta jest nam potrzebna, by określić, czy<br /> trzeba zatrzymywać wysyłanie formularza, czy też<br /> nie. Innymi słowy przechowuje ona informację<br /> o napotkanych błędach. Równie dobrze można by<br /> napisać: {html}var error = 0;{/html} i w razie błędu zmienić tę<br /> wartość na 1. To bez znaczenia, choć pierwszy<br /> sposób uczy dobrych, programistycznych nawyków.<br /> Zostańmy więc przy tym. </p> <h3>Sprawdzenie danych użytkownika</p> </h3> <p>Jeśli pobraliśmy już to, co użytkownik wpisał do<br /> formularza, pora sprawdzić uzyskane wartości.<br /> Zobaczmy, czy wartość pola nick jest pusta, czy<br /> też nie:</p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>nick <span style="color: #339933;">==</span> \<span style="color: #3366CC;">"<span style="color: #000099; font-weight: bold;">\"</span>) { document.forms[<span style="color: #000099; font-weight: bold;">\'</span>dodawanie_posta<span style="color: #000099; font-weight: bold;">\'</span>]. nick.style.border = <span style="color: #000099; font-weight: bold;">\"</span>2px solid#FF0000<span style="color: #000099; font-weight: bold;">\"</span>; alert(<span style="color: #000099; font-weight: bold;">\'</span>Nie wypełniłeś pola z nickiem!<span style="color: #000099; font-weight: bold;">\'</span>); error = true; }</span></pre> </td> </tr> </table> </div> <p>Jak widać, konstrukcja if pozwala sprawdzić,<br /> czy zmienna nick jest pusta. Świadczą o tym dwa<br /> apostrofy. Jeśli chcemy osądzić, czy jakaś zmienna<br /> jest pusta, to używamy do porównywania właśnie<br /> apostrofów bez treści między nimi. Logiczne.</p> <div class="ramka_1 ramka_100"> {html}document.forms['name_formularza'].nazwa_elementu_formularza.value {/html}</p> <p>Konstrukcja ta pobiera wartość danego elementu formularza. Może to być {html}<br /> <input>{/html} czy też<br /> {html}<textarea>{/html}. .value to właściwość danego elementu formularza. Nie jest to dziwne, bo jak wiadomo,<br /> elementy formularza używamy przeważnie do wpisywania jakichś danych, więc logiczne jest,<br /> że muszą mieć jakąś wartość (value). </p> <p>.value to tylko jedna z możliwych opcji. W atrybutach elementów formularzy wpisujemy różne rzeczy,<br /> np. w textarea może to być rows. Jeśli chcemy dobrać się do tej wartości, to analogicznie używamy<br /> .rows:<br /> {html}document.forms['name_formularza'].nazwa_elementu_formularza.rows{/html} </p></div> <p>Jeśli warunek if będzie prawdziwy (czyli<br /> użytkownik nie wpisze nic w pole nick), to wykonujemy<br /> kod w klamrach. Jak wiadomo, odwołując<br /> się do danego pola formularza, możemy<br /> w łatwy sposób pobrać jego wiele właściwości,<br /> w tym style. Korzystamy więc z tego<br /> udogodnienia i zmieniamy border dla pola o {html}name=”nick” na „2px solid #FF0000″;{/html}. </p> <p>W ten sposób pole to otrzyma czerwoną ramkę<br /> świadczącą o błędzie. Następnie wyświetlamy<br /> okienko alert, informujące nas o napotkanych<br /> problemach. Kończymy, ustawiając wartość<br /> zmiennej error na true, zaznaczając tym samym,<br /> że wykryto błędy. </p> <p>Podobnie sprawdzamy tekst wpisany w textarea<br /> o nazwie content: </p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>content <span style="color: #339933;">==</span> \<span style="color: #3366CC;">"<span style="color: #000099; font-weight: bold;">\"</span>) { document.forms[<span style="color: #000099; font-weight: bold;">\'</span>dodawanie_posta<span style="color: #000099; font-weight: bold;">\'</span>].content.style.border = <span style="color: #000099; font-weight: bold;">\"</span>2px solid #FF0000<span style="color: #000099; font-weight: bold;">\"</span>; alert(<span style="color: #000099; font-weight: bold;">\'</span>Nie wypełniłeś pola z treścią!<span style="color: #000099; font-weight: bold;">\'</span>); error = true; }</span></pre> </td> </tr> </table> </div> <h3>Zwracanie wartości przez funkcje<br /> </h3> <p>Pozostaje tylko sprawdzić, czy podczas wykonywania<br /> warunków if skrypt zasygnalizował błąd i potrzebne<br /> jest zatrzymanie wysyłania formularza: </p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>error<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span></pre> </td> </tr> </table> </div> <p>W skrócie: jeśli zmienna error będzie prawdą<br /> (czyli jej wartość będzie równa true), zwróć<br /> (return) fałsz (false). Tym samym wszystkie<br /> akcje zostaną zatrzymane, w tym wysyłanie<br /> formularza. Gdybyśmy zwrócili true, przeglądarka<br /> odebrałaby to tak, jakby wszystko poszło<br /> dobrze.</p> <div class="ramka_1 ramka_100"> <b>return wartosc;</b></p> <p>Użycie tej konstrukcji powoduje zatrzymanie<br /> wykonywania skryptu od momentu jej wystąpienia i jednoczesne zwrócenie wyników działania funkcji w postaci zdefiniowanej jako wartość. Słownie tłumaczymy to jak: zwróć wartość. </p> <ul> <li>return true; – w skrócie: zwróć prawdę </li> <li>return false; – w skrócie: zwróć nieprawdę </li> <ul> <p>return używamy tylko w ciele funkcji!</p> </div> <h3>Ostateczny rezultat<br /> </h3> <p> Rezultat naszej pracy widać na listingu 2.</p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 </pre> </td> <td class="code"> <pre class="html" style="font-family:monospace;"><!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\"> <head> <title>Strona z formularzem</title> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" /> <style type=\"text/css\"> label { display: block; margin: 2px; } </style>  <script type=\"text/javascript\"> window.onload = Laduj; function Laduj(){ document.forms[\'dodawanie_posta\'].onsubmit = Verify; } function Verify(){ var nick = document.forms[\'dodawanie_posta\'].nick.value; var content = document.forms[\'dodawanie_posta\'].content.value; var error = false; if (nick == \"\") { document.forms[\'dodawanie_posta\'].nick.style.border = \"2px solid #FF0000\"; alert(\'Nie wypełniłeś pola z nickiem!\'); error = true; } if (content == \"\") { document.forms[\'dodawanie_posta\'].content.style.border = \"2px solid #FF0000\"; alert(\'Nie wypełniłeś pola z treścią!\'); error = true; } if (error) { return false; } } </script> </head> <body> <form method=\"post\" action name=\"dodawanie_posta\"> <label>Nick: <input type=\"text\" name=\"nick\" value /></label> <label>Tresc <textarea name=\"content\" rows=\"5\" cols=\"20\"></textarea></label> <input type=\"submit\" value=\"dodaj\" /> </form> </body> </html></pre> </td> </tr> </table> </div> <p>Warto jeszcze przyjrzeć się wartościom true i false: </p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>a<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066;">alert</span><span style="color: #009900;">(</span>\<span style="color: #3366CC;">"tak, to prawda<span style="color: #000099; font-weight: bold;">\"</span>); } if(!b) { alert(<span style="color: #000099; font-weight: bold;">\"</span>nie, to nie jest prawda<span style="color: #000099; font-weight: bold;">\"</span>); }</span></pre> </td> </tr> </table> </div> <ul> <li>var a = true; – wartość zmiennej a to true, czyli prawda, </li> <li>var b = false; – wartość zmiennej b to false, czyli fałsz, </li> <li>if (a) – jeśli zmienna a ma wartość true, </li> <li>if (!b) – jeśli zmienna b ma wartość false. </li> </ul> <p>Wykrzyknik to tutaj zaprzeczenie. Jeśli więc<br /> zmienna b nie będzie prawdą, to wykona się<br /> kod w klamrach. Równie dobrze można to zapisać<br /> tak: </p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>a <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066;">alert</span><span style="color: #009900;">(</span>\<span style="color: #3366CC;">"tak, to prawda<span style="color: #000099; font-weight: bold;">\"</span>); } if(b == false) { alert(<span style="color: #000099; font-weight: bold;">\"</span>nie, to nie jest prawda<span style="color: #000099; font-weight: bold;">\"</span>); }</span></pre> </td> </tr> </table> </div> <p> Co do niezwykłej właściwości return, spójrzmy<br /> na ten przykład:</p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> Blabla<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066;">alert</span><span style="color: #009900;">(</span>\<span style="color: #3366CC;">'1<span style="color: #000099; font-weight: bold;">\'</span>); return false; alert(<span style="color: #000099; font-weight: bold;">\'</span>2<span style="color: #000099; font-weight: bold;">\'</span>); } Blabla();</span></pre> </td> </tr> </table> </div> <p>Definiujemy najpierw funkcję o nazwie Blabla,<br /> która pokaże okienko o treści 1. Dalej niestety<br /> nic się nie stanie, bowiem return false; zatrzymuje<br /> działanie funkcji. Tak więc działania {stala}alert(’2′);{/stala}<br /> nie ujrzymy. </p> <p>Nie tylko zmienna może zwracać wartości false<br /> lub true. Może to również robić zwykła funkcja:</p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 9 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> Blabla<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #003366; font-weight: bold;">function</span> Lalala<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span><span style="color: #339933;">!</span>Blabla<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066;">alert</span><span style="color: #009900;">(</span>\<span style="color: #3366CC;">'Funkcja Blabla zwróciła nieprawdę!<span style="color: #000099; font-weight: bold;">\'</span>); } } Lalala();</span></pre> </td> </tr> </table> </div> <p>Wywołujemy {stala}(Lalala();){/stala}, jak widać, funkcję Lalala.<br /> Ta z kolei bada {html}(if (!Blabla())){/html}, czy funkcja<br /> Blabla zwraca fałsz. I rzeczywiście zwraca, bo<br /> w jej ciele zapisaliśmy return false;. W tej sytuacji<br /> wykonuje się kod w klamrach, czyli {stala}alert();{/stala}. Co<br /> więcej, możemy przypisać zwracaną wartość funkcji<br /> do zmiennej:</p> <div class="wp_syntax"> <table> <tr> <td class="line_numbers"> <pre>1 2 3 4 5 6 7 8 9 10 </pre> </td> <td class="code"> <pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> Blabla<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #003366; font-weight: bold;">function</span> Lalala<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #003366; font-weight: bold;">var</span> zmienna <span style="color: #339933;">=</span> Blabla<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span><span style="color: #339933;">!</span>zmienna<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066;">alert</span><span style="color: #009900;">(</span>\<span style="color: #3366CC;">'Funkcja Blabla zwróciła nieprawdę!<span style="color: #000099; font-weight: bold;">\'</span>); } } Lalala();</span></pre> </td> </tr> </table> </div> <p>W ten sposób do zmiennej o nazwie zmienna<br /> przypisaliśmy zwracaną wartość funkcji Blabla.<br /> Dalej podstawiamy ją do if. </p> <p>Jak na razie walidacja formularza jest mało efektywna.<br /> Obramowanie inputów zostaje niezmiennie<br /> kolorowe, mimo braku błędów. Tym problemem<br /> zajmiemy się w następnym odcinku.</p> <p><b>Może Cię zainteresować:</b></p><ol> <li><a href='http://magazynt3.pl/Kurs-JavaScript-cz-3-Dynamiczne-elementy-HTML/' rel='bookmark' title='Kurs JavaScript (cz. 3): Dynamiczne elementy HTML'>Kurs JavaScript (cz. 3): Dynamiczne elementy HTML</a></li> <li><a href='http://magazynt3.pl/Kurs-JavaScript-cz-4-Dynamiczne-elementy-HTML/' rel='bookmark' title='Kurs JavaScript (cz. 4): Dynamiczne elementy HTML'>Kurs JavaScript (cz. 4): Dynamiczne elementy HTML</a></li> </ol> </div> <br class="clearer" /><br /> <div class="authorbox-wrapper"> <div class="authorbox"> <h2 class="gentesque">O autorze</h2> <div class="author-image"> <img alt='' src='http://0.gravatar.com/avatar/4ac5a0127beb66769216f7df8f4b0286?s=80&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G' class='avatar avatar-80 photo' height='80' width='80' /> </div> <div class="author-title adelle">Tomasz Galanciak</div> <br class="clearer" /> <ul class="connect"> <li class="facebook"><a class="tooltip" title="Facebook" href='http://www.facebook.com/tomasz.galanciak'> </a></li> </ul> <div class="more-articles"> Więcej artykułów autorstwa <a href="http://magazynt3.pl/author/tomek/" title="Wpisy, których autorem jest Tomasz Galanciak" rel="author">Tomasz Galanciak</a> » </div> <br class="clearer" /> </div> </div> <br class="clearer" /> <div class="comments-button tooltip" title="Zobacz komentarze"> <a href="http://magazynt3.pl/JavaScript-Prosta-walidacja-formularzy/#respond" title="Skomentuj „JavaScript: Prosta walidacja formularzy”">0 komentarzy »</a> </div> <br class="clearer" /> </div> </div> </div> <div class="right-panel sidebar"> <div class="inner"> <div class="widget"><div class="header-left"> </div><div class="header-middle"><h2 class="gentesque">Nowy numer</h2></div><div class="header-right"> </div><br class="clearer" /><div class="content-wrapper"><div class="content"> <div class="textwidget"><p><a href="http://ulubionykiosk.pl/wydawnictwo/17-t3" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://ulubionykiosk.pl']);" target="_blank"><img src="http://ulubionykiosk.pl/i/dz00MDA=/c1d5ec77/1725-okladka.jpg" width="240" /></a></p> <p>Muzyka jest jedną z moich największych pasji – nic więc dziwnego, że z dużą radością oddaję ten numer w ręce czytelników. W nim bowiem wiodącym tematem jest właśnie muzyka: czego słuchamy, na jakim sprzęcie, jak zmieniała się jej promocja na przestrzeni lat oraz jak ją… kradniemy. W związku z powolnym acz sukcesywnym zbliżaniem się lata, przedstawiamy również 30 kroków jak być w nienagannej formie, gdy już prawdziwie upalne dni zawitają do Polski. Nie zapominamy jednocześnie o gadżetach: testujemy m.in. nowy, topowy smartfon od HTC: One X oraz budżetowe laptopy – by niedrogim kosztem nie rozstawać się z elektroniką również na urlopie.</p> </div> </div></div></div><div class="widget"><div class="header-left"> </div><div class="header-middle"><h2 class="gentesque">Partnerzy</h2></div><div class="header-right"> </div><br class="clearer" /><div class="content-wrapper"><div class="content"> <div class="textwidget"><p><a href="http://imagazine.pl/" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://imagazine.pl']);" target="_blank"><img src="http://magazynt3.pl/imagazine-logo.jpg" width="240"></a></p> <p><br></p> <p><a href="http://facetikuchnia.com.pl/" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://facetikuchnia.com.pl']);" target="_blank"><img src="http://magazynt3.pl/banfik.jpg" width="240"></a></p> </div> </div></div></div> </div> </div> <br class="clearer" /> </div> <div id="comments"> <div class="left-panel"> <div class="inner"> <div class="comments-header"> <div class="ribbon left"> <div class="ribbon-inner"> <h3 class="gentesque">0 komentarzy</h3> </div> </div> </div> <br /> <h3 class="gentesque be-the-first">Skomentuj pierwszy!</h3> <br /> <div id="respond"> <h3 id="reply-title">Zostaw odpowiedź <small><a rel="nofollow" id="cancel-comment-reply-link" href="/JavaScript-Prosta-walidacja-formularzy/#respond" style="display:none;">Anuluj pisanie odpowiedzi</a></small></h3> <form action="http://magazynt3.pl/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Twój adres nie zostanie opublikowany. Wymagane pola są oznaczone <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Imię</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-email"><label for="email">E-mail</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-url"><label for="url">WWW</label><input id="url" name="url" type="text" value="" size="30" /></p> <p class="comment-form-comment"><label for="comment">Komentarz</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">

Możesz używać tych tagów i atrybutów HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Internet Maker