LiveValidation validerar det du fyller i formuläret direkt så du slipper klicka på ”skicka” innan du får veta om du fyllt i allt korrekt. En sådan funktion är väldigt användarvänlig eftersom man slipper sitta och prova sig fram. Så fort någonting blir fel säger den ifrån.
Innan vi sätter igång
Ett tips om du inte satt dig in i PHP är att läsa min PHP-guide här på sajten för att förstå vad det är vi gör. Är du lat och bara vill ha ett fungerande mail-formulär finns det att ladda ner längst ner på sidan.
Ladda ner LiveValidation
Här finns det två val; det första är om du redan använder dig av Prototype som LiveValidation är byggt på, då är det prototype-versionen du ska ladda ner. Om inte ska du ladda ner standalone-versionen, vilket är den jag kommer att använda.
Ett tips är även att du väljer den dokumenterade versionen så du kan ändra i koden eftersom meddelandena är på engelska och då är det fritt fram att ändra dem till svenska.
Inkludera LiveValidation i ditt dokument
För att det ska fungera måste du inkludera det i ditt dokument. Detta gör du enkelt genom att skriva i följande innanför head-taggarna:
<script type="text/javascript" src="livevalidation.js"></script>
Detta förutsätter att filen heter livevalidation.js och ligger i samma mapp som ditt dokument.
Skapa formuläret
Formuläret i sig är ingenting avancerat utan helt vanlig HTML-kod. Det viktiga är att vi sätter ut ett id och ett name-värde. Name-värdet är för att php-scriptet ska veta vad fälten innehåller och id-värdet är för att LiveValidation ska kunna identifiera vilket fält som är vilket.
<html> <head> <script type="text/javascript" src="livevalidation.js"></script> </head> <body> <form method="post" enctype="multipart/form-data" action="?skicka"> <p>Namn: </p> <p>Email: </p> <p>Rubrik: </p> <p>Meddelande: </p> <p>Vad är ?: </p> <p> </p> </form> </body> </html>
Som du ser har jag inte satt ut något fråga på spam-skyddet ännu utan vi väntar med den till sist.
Skicka E-mailet
Som du ser i formuläret är action satt till ?skicka, så när du klickar på submit-knappen vilket gör att vi kan säga åt scriptet att skicka mejlet när ”skicka” är satt. Detta skriver du in ovanför formuläret:
<?PHP
// Detta sker om "skicka" är satt
if(isset($_GET['skicka'])) {
// sätter variablar så man lättare kan se vad som är vad
$minmail = 'dinmejl@mejl.com';
$namn = $_POST['namn'];
$email = $_POST['email'];
$rubrik = $_POST['rubrik'];
$meddelande = $_POST['meddelande'];
mail($minmail,$rubrik,$meddelande, $namn . ' <' .$email . '>');
echo 'Mailet är skickat!';
};
?>
Dags att börja validiera
Nu när vi har ett fungerande mail-script ska vi sammanfoga det med LiveValidation. Detta kommer enkelt, vi har satt id på varje textfält vilket är det enda vi behöver för att LiveValidation ska fungera med formuläret. Det vi ska göra nu är att lägga till lite javascript innanför head-taggarna. Vi börjar med att se till att alla fält måste fyllas i och att det verkligen är en email-adress de fyller i:
<p>Namn: <input type="text" name="namn" id="namn" /></p>
<script type="text/javascript">
var namn = new LiveValidation('namn');
namn.add( Validate.Presence );
</script>
<p>Email: <input type="text" id="email" name="email" /></p>
<script type="text/javascript">
var email = new LiveValidation('email');
email.add( Validate.Presence );
email.add( Validate.Email );
</script>
<p>Rubrik: <input type="text" id="rubrik" name="rubrik" /></p>
<script type="text/javascript">
var rubrik = new LiveValidation('rubrik');
rubrik.add( Validate.Presence );
</script>
<p>Meddelande: <textarea id="meddelande" name="meddelande"></textarea></p>
<script type="text/javascript">
var meddelande = new LiveValidation('meddelande');
meddelande.add( Validate.Presence );
</script>
<p>Vad är ?: <input type="text" id="spam" name="spam" /></p>
<script type="text/javascript">
var spam = new LiveValidation('spam');
spam.add( Validate.Presence );
</script>
Spamskyddet
Nu när allting måste fyllas i för att man ska kunna skicka vill vi även ha ett spamskydd som ser till att det är en människa och inte en spambot som skickar mejlet. Till detta ska vi göra ett enkelt php-script som slumpar två tal som man måste addera för att få skicka mejlet- Så nu ändrar du javascriptet under spam-fätet till:
<script type="text/javascript">
var spam = new LiveValidation('spam');
spam.add( Validate.Presence );
spam.add( Validate.Inclusion, { within: [ '<? print $summa; ?>' ] } );
</script>
Du byter även ut frågan till:
<? $tal1 = rand(1,6); $tal2 = rand(1,6); $summa = $tal1 + $tal2; ?> Vad är <? print $tal1 . ' + ' . $tal2; ?>?
Klart, men fult
Nu har du ett fungerande mejl-script som validerar under tiden du skriver. Eftersom vi inte lagt till någon stil så är det väldigt fult, dessutom har vi inte ändrat meddelandena vilket gör att de kanske inte stämmer med vad vi vill att det ska stå.
I versionen som finns att ladda ner är dock en stilmall inkluderad som fixar till formuläret samt så är meddelandena ändrade att passa detta formulär.
Du kan ladda ner formuläret här.
Källkoden:
<html>
<head>
<script type="text/javascript" src="livevalidation.js"></script>
</head>
<body>
<?PHP
// Detta sker om "skicka" är satt
if(isset($_GET['skicka'])) {
// sätter variablar så man lättare kan se vad som är vad
$minmail = 'dinmejl@mejl.com';
$namn = $_POST['namn'];
$email = $_POST['email'];
$rubrik = $_POST['rubrik'];
$meddelande = $_POST['meddelande'];
mail($minmail,$rubrik,$meddelande, $namn . ' <' .$email . '>');
echo 'Mailet är skickat!';
};
?>
<form method="post" enctype="multipart/form-data" action="?skicka">
<p>Namn:
</p>
<script type="text/javascript">
var namn = new LiveValidation('namn');
namn.add( Validate.Presence );
</script>
<p>Email: <input type="text" id="email" name="email" /></p>
<script type="text/javascript">
var email = new LiveValidation('email');
email.add( Validate.Presence );
email.add( Validate.Email );
</script>
<p>Rubrik:
</p>
<script type="text/javascript">
var rubrik = new LiveValidation('rubrik');
rubrik.add( Validate.Presence );
</script>
<p>Meddelande: <textarea id="meddelande" name="meddelande"></textarea></p>
<script type="text/javascript">
var meddelande = new LiveValidation('meddelande');
meddelande.add( Validate.Presence );
</script>
<p><?
$tal1 = rand(1,6);
$tal2 = rand(1,6);
$summa = $tal1 + $tal2;
?>
Vad är <? print $tal1 . ' + ' . $tal2; ?>? <input type="text" id="spam" name="spam" /></p>
<script type="text/javascript">
var spam = new LiveValidation('spam');
spam.add( Validate.Presence );
spam.add( Validate.Inclusion, { within: [ '<? print $summa; ?>' ] } );
</script>
<p><input type="submit" value="skicka" /></p>
</form>
<script type="text/javascript">
var namn = new LiveValidation('namn');
namn.add( Validate.Presence );
</script>
</body>
</html>
Tweets!
LiveValidation är ett trevligt litet script! :)
Problemet med din lösning är att den BARA fungerar med JavaScript (JS) aktiverat. Spambotar är ofta skrivna på textbaserade webbläsare som inte ens stöder JS. Din lösning ger alltså nästan inget skydd mot dessa. Därför är det viktigt att göra valideringen på såväl serversidan (PHP) och direkt i webbläsaren (JavaScript).
jag får det inte att fungera. allt funkar utom att den skriver ut ett nytt tal för validering. det står bara: Vad är ?
det kommer inget tal???!!!
Hej jag gillar dina guider men i det här fallet har du missat något. Jag har testat att ladda ner det färdiga forumläret men det funkar inte. Kan du kanske ta en titt på php-koden som du har skrivit och se vad som är fel?
Följande står ovanför formuläret:
‘); echo ‘Mailet är skickat!’; }; ?>
Till Fredrik och Jocke
Så här ska koden för ”Vad är ?” se ut!
Vad är ?
var spam = new LiveValidation(‘spam’);
spam.add( Validate.Presence );
spam.add( Validate.Inclusion, { within: [ '' ] } );
Som ni ser så har jag bara lagt till PHP efter <?
Hoppas det funkar för er, det löste iaf mitt problem.
Det skrevs inte ut som jag skrev det =O