Witam ! Mam za zadanie napisać następujący formularz.
a. Zdefiniuj witrynę intenetową zawierająca formularz składający się z pól w których użytkownik może wpisywać swoje imię, nazwisko, email przy wykorzystaniu możliwości dosepnych w HTML 5.
b.formularz z punktu a rozszerz o walidację pól imię i nazwisko po wprowadzeniu danych i opuszczeniu danego pola przez użytkownika. Walidacja ta powinna sprawdzać czy wprowadzone ciągi znaków nie zawierają pewnych znaków zastrzeżonych podanych w postaci tablicy. Zadeklaruj wstępną listę znaków zastrzeżoych pozwalającą na sprawdzenie poprawoności działania zdefiniowanego kody. Po wprowadzeniu tekstu zawierającego wykluczone znaki przygotuj wyświetlanie użytkownikowi odpowiedniego komunikatu sygnalizującego zaistniałą sytuację. Punkt ten moża zrealizować w oparciu o bibliotekę jQuery.
c. obsłuż proces przesłania danych z formularza w oparciu o technologię AJAX w celu wywołania pliku PHP, który przejmie dane wprowadzone od użytkownika i umieści je w przykładowej tabeli w bazie danych wykorzystując mechanizmy PDO, a następnie wyświetli informację o poprawnym dodaniu danych do bazy danych pod formularzem bez przeładowywania strony.
Polecenie wykorzystywane do stworzenia struktury tabeli w pounkcie c.:
CREATE TABLE Tabela {
id INT (6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50));
Zależy mi głównie na punktach a i b. Napisałem fragment kodu, który ma obsługiwać walidację z podpunktu b. Zatrzymałem się na tym, jak zrobić, żeby komunikat, że wprowadzono niedozwolony znak pokazał się po opuszczeniu inputa. Proszę o pomoc, chciałbym żeby to było napisane w dość prosty sposób, podobne do czegoś co stworzyłem.
Do tej pory też oczywiście mogę mieć błędy, pewnie mam, w warunkach, czy w pętlach, także tutaj również prosiłbym o poprawienie mnie. Nie mogę znaleźć odpowiedniej pomocy w internecie, a przejrzałem już kilka stron o walidacji formularzy.
Przepraszam jeśli źle coś wkleiłem lub jest nieczytelnie, również uwagi mile widziane :)
Mój kod JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
var zas = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "!", "?", "@", "#", "$", "%", "^", "&", "*", "(", ")"];
var imie = document.getElementById("imie");
var nazwisko = document.getElementById("nazwisko");
var email = document.getElementById("email");
var dlugoscImie = imie.length;
var dlugoscNazwisko = nazwisko.length;
function sprawdzImie() {
for (i = 0; i < dlugoscImie; i++) {
for (j = 0; j < zas.length; j++) {
if (imie.charAt(i) == zas[i])
alert("To nie jest prawidłowy znak!");
}
}
}
function sprawdzNazwisko() {
for (i = 0; i < dlugoscNazwisko; i++) {
for (j = 0; j < zas.length; j++) {
if (nazwisko.charAt(i) == zas[i])
alert("To nie jest prawidłowy znak!");
}
}
}
</script>
a tutaj jeszcze dołączam kod HTML:
<body>
<form id="formularz" method="post" action="formularz.php">
<div class="container">
<div>
Imię: <input class="przycisk" type="text" name="imie" id="imie" />
<span class="komunikat"> </span> </div>
<div>
Nazwisko: <input class="przycisk" type="text" name="nazwisko" id="nazwisko" />
<span class="komunikat" style="margin-left:30px;"></span>
</div>
<div>
Email:
<input class="przycisk" type="email" name="email" id="email" />
</div>
<div>
<input type="submit" class="sub" id="log" />
</div>
</form>
</body>
