Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla
Transkrypt
Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla
JavaScript – walidacja formularzy 1 Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla formularz jak na rysunku oraz wykorzystuje skrypt JS do walidacji formularza. Uruchomić i przeanalizować działanie skryptu. formularz.html <head><script type="text/javascript" src="walid.js"></script></head> <body> <form action="mailto:[email protected]" method="post" onsubmit="return sprawdz();"> <h4>Proszę podać swoje dane:<br />(Pola oznaczone * muszą zostać wypełnione)</h4> <table> <tr><td>Imię:</td> <td><input type="text" name="imie"></td></tr> <tr><td>Nazwisko:</td> <td><input type="text" name="nazwisko">*</td> </tr> <tr> <td>Tel.:</td> <td><input type="text" name="tel">*</td></tr> </table> <p><br/>Najbardziej lubisz programować w *:<br /> <input type="radio" name="wybor" value="d"/>Delphi <input type="radio" name="wybor" value='c' />C++ <input type="radio" name="wybor" value='j'/>Javie <input type="submit" value="wyślij"/> </p> </form></body></html> walid.js function sprawdz() { var brakuje_danych=false; var formularz=document.forms[0]; var napis=""; if (formularz.nazwisko.value == "") { if (formularz.tel.value == "") } { //pobranie elementu formularza ze strony napis += "nazwisko\n"; brakuje_danych=true; napis += "telefon\n"; brakuje_danych=true; } if (brakuje_danych) { alert ("Nie wypełniłeś następujących pól:\n" + napis); return false; } JavaScript – walidacja formularzy var ile=document.forms[0].wybor.length; //ilość przycisków w grupie wybor for (i=0;i<ile;i++) //sprawdzenie czy któryś przycisk jest zaznaczony { wybrany=document.forms[0].wybor[i].checked; if (wybrany) break; //jeśli wybrano przycisk – przerwij działanie for } if (!wybrany) { alert("Musisz wybrać język! "); document.forms[0].wybor[0].focus(); return false; } else return true; } Ćw.2. Na podstawie ćw.1 i materiałów wykładowych napisać skrypt, który przeprowadzi walidację formularza postaci: 2