Kontakt forma - obavezno popunjavanje i validacija

drweni · siječanj 2012 23:01 16

pozdrav… na svojoj web stranici imam jednostavno kontakt formu (samo 4 polaj, ime, email, upit, poruka i 2 gumba “pošalji” i “odustani” ) … htio bih dodati da su sva 4 polja obavezna, da se ne može poslati dok se sva 4 polja ne popune, ako je moguće da polje za e-mail zahtjeva pravilno popunjavanje (nešto@nešto.xyz) …

ovo je kod iz index.html-a :

</div>

			</div>

			<div class="panel" title="Kontakt">

				<div class="wrapper">

					

                    <div id="contact_form">

                    

                        <form method="post" name="contact" action="sendmail.php">



                        <label for="author">Ime:</label> <input type="text" id="author" name="author" class="required input_field" />

                        <div class="cleaner_h10"></div>

                        

                        <label for="email">Email:</label> <input type="text" id="email" name="email" class="validate-email required input_field" />

                        <div class="cleaner_h10"></div>

                        

                        <label for="subject">Upit:</label> <input type="text" name="subject" id="subject" class="input_field" />

                        <div class="cleaner_h10"></div>

                        

                        <label for="text">Poruka:</label> <textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>

                        <div class="cleaner_h10"></div>

                        

                        <input style="font-weight: bold;" type="submit" class="submit_btn" name="submit" id="submit" value=" Pošalji " />

                        <input style="font-weight: bold;" type="reset" class="submit_btn" name="reset" id="reset" value=" Odustani " />

                        

                        

                        </form>

                    </div>

a ovo je kod filea sendmail.php

<!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">
<head>
<meta http-equiv="refresh" content="0;url=http://www.xyz.xyz/#5" />
<title>sendmail</title>
</head>

<body>
</body>
</html>


<?php
  $email = $_REQUEST['email'] ;
  $message = $_REQUEST['text'] ;

  mail( "[email protected]", "Upit",
    $message, "From: $email" );

?>

eto ako netko ima vremena/volje pomoći bio bih zahvalan…

igor · siječanj 2012 23:16 16

U sendmail.php stavi ovaj kod, probaj, i javi je li radi kako treba.

zvijer · siječanj 2012 23:30 16

jquery validation, jednostavno za implementaciju, ima required polja i emal validation

http://docs.jquery.com/Plugins/Validation

drweni · siječanj 2012 23:57 16

@igor - radi, kada popunim sva polja pošalje na mail, kada ne popunim ne pošalje…ali ako ostavim polja prazna i klinem “pošalji” ne reagira, nego samo vrati na početnu stranicu, jednako kao kada i pošalje… znači sve radi ali korisnik ne vidi da nije uspio poslati …

@zvijer - u koji file trebam staviti taj kod sa tvog linka?

igor · siječanj 2012 00:14 17

Jesi siguran da si stavio kod koji ispisuje error unutrar bodya? Ovako bi trebalo to izgledat.

drweni · siječanj 2012 00:23 17

kopirao sam ponovno kod, sada se pojavljuje na pola sekunde bijeli ekran s natpisom “morate popuniti sva polja” , screenshot u privitku… jedva sam uspio napraviti screenshot koliko brzo se to pojavi i nestane … znači funkcionira, ali ako bi mogao nekako napraviti da se ta obavijest: “morate popuniti sva polja” , prikaze u malom popup-u ili negdje da se fino vidi… hvala…

igor · siječanj 2012 00:34 17

Tek sam vidio da si stavio gore da se stranica refresha. Dakle, napravi ili index.php ili sendmail.php, neka ti i forma i kod za provjeru forme budu na istoj stranici. Onda ce sve bit jasnije.

<span class="syntaxhtml"><br /><!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html&nbsp;xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>sendmail</title><br /></head><br /><br /><body><br /><span class="syntaxdefault"><?php<br /></span><span class="syntaxkeyword">if(isset(</span><span class="syntaxdefault">$_POST</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'submit'</span><span class="syntaxkeyword">]))&nbsp;<br />{<br /></span><span class="syntaxdefault">$error&nbsp;</span><span class="syntaxkeyword">=&nbsp;</span><span class="syntaxstring">''</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$author&nbsp;</span><span class="syntaxkeyword">=&nbsp;</span><span class="syntaxdefault">trim</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$_POST</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'author'</span><span class="syntaxkeyword">]);<br /></span><span class="syntaxdefault">$email&nbsp;</span><span class="syntaxkeyword">=&nbsp;</span><span class="syntaxdefault">trim</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$_POST</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'email'</span><span class="syntaxkeyword">]);<br /></span><span class="syntaxdefault">$message&nbsp;</span><span class="syntaxkeyword">=&nbsp;</span><span class="syntaxdefault">trim</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$_POST</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'text'</span><span class="syntaxkeyword">]);<br /></span><span class="syntaxdefault">$subject&nbsp;</span><span class="syntaxkeyword">=&nbsp;</span><span class="syntaxdefault">trim</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$_POST</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'subject'</span><span class="syntaxkeyword">]);<br /><br />if(empty(</span><span class="syntaxdefault">$author</span><span class="syntaxkeyword">)&nbsp;||&nbsp;empty(</span><span class="syntaxdefault">$email</span><span class="syntaxkeyword">)&nbsp;||&nbsp;empty(</span><span class="syntaxdefault">$subject</span><span class="syntaxkeyword">)&nbsp;||&nbsp;empty(</span><span class="syntaxdefault">$message</span><span class="syntaxkeyword">))<br />{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">$error&nbsp;</span><span class="syntaxkeyword">.=&nbsp;</span><span class="syntaxstring">'Morate&nbsp;popuniti&nbsp;sva&nbsp;polja.<br />'</span><span class="syntaxkeyword">;<br />}<br /><br />if(!</span><span class="syntaxdefault">preg_match</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i"</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">$email</span><span class="syntaxkeyword">))<br />{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">$error&nbsp;</span><span class="syntaxkeyword">.=&nbsp;</span><span class="syntaxstring">'Neispravan&nbsp;e-mail<br />'</span><span class="syntaxkeyword">;<br />}<br /><br />if(</span><span class="syntaxdefault">$error&nbsp;</span><span class="syntaxkeyword">==&nbsp;</span><span class="syntaxstring">''</span><span class="syntaxkeyword">)<br />{<br /></span><span class="syntaxdefault">mail</span><span class="syntaxkeyword">(&nbsp;</span><span class="syntaxstring">"[email protected]"</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxstring">"Upit"</span><span class="syntaxkeyword">,<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">$message</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxstring">"From:&nbsp;</span><span class="syntaxdefault">$email</span><span class="syntaxstring">"&nbsp;</span><span class="syntaxkeyword">);<br />&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;</span><span class="syntaxstring">'E-mail&nbsp;poslan!'</span><span class="syntaxkeyword">;<br />}&nbsp;else&nbsp;{<br />&nbsp;echo&nbsp;</span><span class="syntaxdefault">$error</span><span class="syntaxkeyword">;<br />}<br /><br />}<br /></span><span class="syntaxdefault">?><br /></span>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="panel"&nbsp;title="Kontakt"><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="wrapper"><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="contact_form"><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<form&nbsp;method="post"&nbsp;name="contact"&nbsp;action=""><br /><br /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;for="author">Ime:</label>&nbsp;<input&nbsp;type="text"&nbsp;id="author"&nbsp;name="author"&nbsp;class="required&nbsp;input_field"&nbsp;/><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cleaner_h10"></div><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;for="email">Email:</label>&nbsp;<input&nbsp;type="text"&nbsp;id="email"&nbsp;name="email"&nbsp;class="validate-email&nbsp;required&nbsp;input_field"&nbsp;/><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cleaner_h10"></div><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;for="subject">Upit:</label>&nbsp;<input&nbsp;type="text"&nbsp;name="subject"&nbsp;id="subject"&nbsp;class="input_field"&nbsp;/><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cleaner_h10"></div><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;for="text">Poruka:</label>&nbsp;<textarea&nbsp;id="text"&nbsp;name="text"&nbsp;rows="0"&nbsp;cols="0"&nbsp;class="required"></textarea><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cleaner_h10"></div><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;style="font-weight:&nbsp;bold;"&nbsp;type="submit"&nbsp;class="submit_btn"&nbsp;name="submit"&nbsp;id="submit"&nbsp;value="&nbsp;Pošalji&nbsp;"&nbsp;/><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;style="font-weight:&nbsp;bold;"&nbsp;type="reset"&nbsp;class="submit_btn"&nbsp;name="reset"&nbsp;id="reset"&nbsp;value="&nbsp;Odustani&nbsp;"&nbsp;/><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</form><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><br /></body><br /></html><br /><br /></span>

Ovo možeš jednostavno ubacit kao index.php. Zaboravio sam ti reći da se funkcija eregi ne koristi od PHP verzije 5.3, pa koristi preg_match, kao što sam ti napravio gore.

zvijer · siječanj 2012 01:54 17

u head ubacis jquery i jquery validate i ovo

$(document).ready(function(){
$( “#id_forme” ).validate();
});

i u polja forme stavis class required (class=“required”) sto vidim da vec imas samo za email ti je class=“required email”

drweni · siječanj 2012 18:17 17

hvala obojici, probao sam Igorovu “verziju” i sad je sve ok osim jedne stvari… kada se ne popune polja pravilno, znači kada se ne može poslati, onda samo u chromu ostane na toj stranici i izbaci obavijest “Morate popuniti sva polja. Neispravan e-mail” , dok u operi i firefoxu se vrati na početnu stranicu. Može li se to kako regulirati da kada se polja popune neispravno da se ostane ne toj stranici i da se vidi obavijest?
Hvala

igor · siječanj 2012 18:22 17

[quote=“drweni”]hvala obojici, probao sam Igorovu “verziju” i sad je sve ok osim jedne stvari… kada se ne popune polja pravilno, znači kada se ne može poslati, onda samo u chromu ostane na toj stranici i izbaci obavijest “Morate popuniti sva polja. Neispravan e-mail” , dok u operi i firefoxu se vrati na početnu stranicu. Može li se to kako regulirati da kada se polja popune neispravno da se ostane ne toj stranici i da se vidi obavijest?
Hvala[/quote]

Jesi izbrisao ovu liniju:

<meta http-equiv="refresh" content="0;url=http://www.xyz.xyz/#5" />

drweni · siječanj 2012 18:49 17

[quote=“igor”]Jesi izbrisao ovu liniju:

<meta http-equiv="refresh" content="0;url=http://www.xyz.xyz/#5" />

[/quote]

nije bila izbrisana… ali sad sam ju izbrisao pa i dalje isto…nakon toga sam obrisao sendamil.php file jer si rekao da sve stavim u 1 file…sve sam stavio u index.html i sejvo ga kao index.php… :neznam:

igor · siječanj 2012 18:54 17

Dobro si uradio, to je to, a sad nakon što si pobrisao tu liniju vjerojatno ti je stranica ostala spremljena pa izbriši cache, refreshaj (F5) stranicu i moralo bi radit, jer sam je upravo testirao kod sebe.

drweni · siječanj 2012 19:40 17

Radi , hvala ti puno.