Skocz do zawartości

Witaj na forum webmasterów Webax.pl.

Wyświetl nową zawartość

[JS] [PHP] Formularz e-mail z walidacją


  • Zaloguj się, aby dodać odpowiedź
4 odpowiedzi w tym temacie
Cebab
Cebab

    Początkujący

  • Użytkownik
  • PipPipPip
  • 132 postów
#1

Napisano 26 sierpień 2012 - 21:50

Przygotowałem dla Siebie formularz e-mail z walidacją w JS, jeśli ktoś nie wypełni pola, to pojawi się okienko z informacją a dane pole podświetli się na czerwono, oczywiście nie napisał bym tego bez pomocy Comandeer'a, w zasadzie jego pomoc była nie oceniona, ja wykonywałem brudną robotę a on mówił czego użyć ;) Oczywiście zdaję sobie sprawę że kod nie jest idealny, ponieważ nie wykorzystałem wszystkich porad Comandeer'a, ale gdy go poprawię na pewno go tutaj zaktualizują, natomiast na chwilę obecną może i w takiej postaci się komuś przyda. Nie roszczę żadnych prawe do tego kodu, natomiast miło by było, jeśli wprowadzisz jakieś poprawki to żebyś umieścił je również w tym temacie ;) formularz.php
<script type="text/javascript">        <!--function error(tekst) {	if (errfound) return;		alert(tekst);errfound = true;}function validate() {	errfound = false;	var bledy = "";	with (document.forms[0]) {		if(imie.value==''){ 			bledy +="Nie podałeś imienia. \n";			imie.style.background='#ffb3b3';			}		if(email.value == ""){			bledy += "Nie podales nazwiska.\n";			email.style.background='#ffb3b3';			}		if(wiadomosc.value == ""){			bledy += "Nie podales wiaodmosci.\n";			wiadomosc.style.background='#ffb3b3';			}				if (bledy != "")  error(bledy); 	} return !errfound;}        //-->    </script> <div id="formularz_zakupow">	<form action="skrypt.php" method="post" onsubmit="return validate();">					<div class="fz_ramka">			<div class="fz_tytul">Twoje imie</div>			<input type="text" name="imie" class="fz_pole" onfocus="style.background='#fff'"/>		</div>				<div class="fz_ramka">			<div class="fz_tytul">Twój e-mail</div>			<input type="text" name="email" class="fz_pole" onfocus="style.background='#fff'"/>		</div>					<div class="fz_ramka">			<div class="fz_tytul">Wiadomość</div>			<textarea name="wiadomosc" cols="50" rows="10" class="fz_pole" onfocus="style.background='#fff'"></textarea>		</div>			    <div id="blockright">		<input type="submit" value="Wyślij" class="fk_submit"/><input type="reset" value="od nowa" class="fk_submit" >		</div>	</form>
skrypt.php
<?phpif (empty($_POST['submit'])) {     }								$message = "Treść wiadomości:\n$_POST[wiadomosc]\nWysłał: $_POST[imie]\nE-mail: $_POST[email]";								$header = "From: $_POST[imie] <$_POST[email]>";								@mail("twojemail@tlen.pl","tytulwiadomosc","$message","$header")								or die(include 'nowiadomosc.php');								include 'yeswiadomosc.php';								?> 
yeswiadomosc.php - gdy wiadomość zostanie wysłana
<script type="text/javascript">        <!--				alert('Twoja wiadomość została wysłana i właśnie dotarła do naszej skrzynki pocztowej.')				    //-->    </script>
nowiadomosc.php - gdy nie pójdzie wysłać wiadomości
<script type="text/javascript">        <!--				alert('Przykro nam, ale nie udało się wysłać wiadomości z przyczyn technicznych niezależnych od nas.')				    //-->    </script>
style.css
.fz_ramka{	overflow:hidden;	margin-bottom: 10px;	}.fz_tytul{	float: left;	widtH: 150px;}.fz_pole{	float: left;  border: 1px solid #b3b3b3;}.fk_submit{	background: none;	padding: 10px 0 10px 0;	width: 85px;	text-align: center;	display: block;	margin-top: 5px;	text-transform: uppercase;	font-size: 14px;	font-family: 'libregular';	font-weight: bold;	color: #2a2927;	border: none;	cursor: pointer;	float: left;	margin-left: 10px;}.fk_submit:hover{		color: #90ba37;		background: none;}#blockright{	display: block;	float: right;	margin-right: 30px;}

  • 0

zurek107
zurek107

    Żółtodziób

  • Użytkownik
  • Pip
  • 4 postów
#2

Napisano 26 sierpień 2012 - 22:36

[quote name='"Cebab"]Oczywiście zdaję sobie sprawę że kod nie jest idealny' date=' ponieważ nie wykorzystałem wszystkich porad Comandeer'a[/quote']
Trzeba było posłuchać :) Póki co... walidacja z tego raczej marna. Wystarczy, że wyłączę JS w swojej przeglądarce i już wyślę Ci pustą wiadomość. Z resztą sprawdzenie, czy pola formularza nie są puste to prawie żadne zabezpieczenie. Powinieneś w pierwszej kolejności zastanowić się, co użytkownik może tam właściwie wpisać... Ogólnie walidacja w JS to kiepski pomysł. Osobne pliki na komunikaty o potwierdzeniu wysłania wiadomości/ewentualnych błędach??

Czekam na kolejną wersję ;)
  • 0

Comandeer
Comandeer

    Stały bywalec

  • Developer
  • 418 postów
#3

Napisano 27 sierpień 2012 - 12:27

Ogólnie walidacja w JS to kiepski pomysł.

Mam serwer postawiony na node.js. Odpalam ten sam validator po stronie klienta i serwera - jedną biblioteką działam na dwóch frontach.
Walidacja w JS po stronie klienta nie jest kiepskim pomysłem. Mamy formularz, w którym jest 1500 pól. w 1349 popełniłeś błąd - zamiast dwukropka napisałeś średnik. Wysyłasz cały formularz na serwer, czekasz jakieś 5-10 sekund i zwraca ci wspaniałomyślnie formularz z komunikatem, że gdzieś tam popełniłeś błąd. A tak - zdarzenie blur na polu (względnie submit formularza) i komunikacik od razu się pojawia i informuje co żeś przeskrobał. z punktu widzenia usability - walidacja po stronie klienta jak najbardziej.
Oczywiście po stronie serwera też musi być, bo sam nieraz ślę pakiety z całkowitym pominięciem przeglądarki ;)
  • 0

Moje tutoriale

Ad hominem attacks are valid arguments, and you are an idiot.


zurek107
zurek107

    Żółtodziób

  • Użytkownik
  • Pip
  • 4 postów
#4

Napisano 27 sierpień 2012 - 16:20

Rzeczywiście przyznam, że JS może być w tym wypadku pomocne, ale mimo to bez walidacje po stronie serwera się nie obejdzie.
  • 0

Cebab
Cebab

    Początkujący

  • Użytkownik
  • PipPipPip
  • 132 postów
#5

Napisano 28 sierpień 2012 - 19:34

Skrypt formularza jeszcze przed jego edycją, posiadał walidację po stronie serwera, także jest cały czas ;)
  • 0