Valideer input
Op internet kom ik diversen manieren tegen om de velden te checken.
Ik ben opzoek naar een manier om ongeveer 10 velden te checken met error teruggave.
Sommige velden hebben meerdere error teruggaves bijvoorbeeld de vooraam, deze mag niet leeg zijn maar ook geen cijfers hebben.
veld is leeg "vul uw voornaam in" of cijfers "onjuiste tekens"
Daarnaast wil ik de error zelf kunnen stijlen.
Wat is nu de beste en veiligste manier om dit te doen? via javascript/jQuery of php?
de veiligste manier is php
be beste manier is beiden
php controleert en jquery pakt de error over en voegt de elementen met error meldingen toe aan je html?
Een goede basis begint bij PHP. Dan heb je in ieder geval al een beveiliging.
Je kunt je resultaat in je PHP script terugkoppelen naar de browser tijdens het laden.
Als je dit onder de knie hebt kun je ook real time bijvoorbeeld al gaan controleren.
Hoe kun je dan met php relatime controleren, dat kan toch alleen met javascript?
Bryan De Baar op 25/11/2015 22:35:11:
@peter k
Hoe kun je dan met php relatime controleren, dat kan toch alleen met javascript?
Hoe kun je dan met php relatime controleren, dat kan toch alleen met javascript?
Het ligt er aan hoe je het wenst op te bouwen.
Stel dat je een unieke waarde wenst die nog niet in je database staat.
Dat doe je met een combinatie van beiden.
Javascript is client side en dus altijd aan te passen.
Je kunt met behulp van Javascript een request doen naar je server en dan kijken of het resultaat er al is.
Als het alleen ter ondersteuning van je gebruiker is kun je inderdaad af met alleen Javascript.
Wat ik nu met php heb is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
// define variables and set to empty values
$firstnameErr = $lastnameErr = "";
$firstname = $lastname = "";
$firstnameok = $lastnameok= "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["firstname"])) {
$firstnameErr = "<label class='error'>Vul uw voornaam in</label>";
} else {
$firstnameok = ($_POST["firstname"]);
}
if (empty($_POST["firstname"])) {
$lastnameErr = "<label class='error'>Vul uw achternaam in</label>";
} else {
$lastnameok = ($_POST["lastname"]);
}
}
?>
// define variables and set to empty values
$firstnameErr = $lastnameErr = "";
$firstname = $lastname = "";
$firstnameok = $lastnameok= "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["firstname"])) {
$firstnameErr = "<label class='error'>Vul uw voornaam in</label>";
} else {
$firstnameok = ($_POST["firstname"]);
}
if (empty($_POST["firstname"])) {
$lastnameErr = "<label class='error'>Vul uw achternaam in</label>";
} else {
$lastnameok = ($_POST["lastname"]);
}
}
?>
de HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<label>Voornaam</label>
<input type="text" name="firstname" value="<?php echo "$firstnameok"; ?>">
<br>
<?php echo "$firstnameErr"; ?>
<br>
<label>Achternaam</label>
<input type="text" name="lastname" value="<?php echo "$lastnameok"; ?>">
<br>
<?php echo "$lastnameErr"; ?>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<label>Voornaam</label>
<input type="text" name="firstname" value="<?php echo "$firstnameok"; ?>">
<br>
<?php echo "$firstnameErr"; ?>
<br>
<label>Achternaam</label>
<input type="text" name="lastname" value="<?php echo "$lastnameok"; ?>">
<br>
<?php echo "$lastnameErr"; ?>
<br>
<input type="submit" name="submit" value="Submit">
</form>
Uiteraard komt er ook een email veld bij, stel ik wil deze realtime door php laten controleren hoe zet ik dat dan op?
Moet ik dan met javascript een keyup functie maken en dan een call naar de php?
Beter maak je validatie in javascroipt(dan heb je je realtime), en voor de zekerheid check je nog een keer alles op de server, aangezien javascript uitgeschakeld of gemanipuleerd kan worden.
met keyup zou ik het niet doen, kies dan voor de blur.
Met keyup krijg je dus al foutmeldingen terwijl je aan het typen bent.
Met blur ga je pas checken zodra het veld zijn focust verliest.
Gewijzigd op 27/11/2015 00:27:16 door Randy vsf
Die gaat Jquery ver voorbij.
Mooiste van al... je hebt jquery lite tot je beschikking in Angular.
Er zit toch een heel groot verschil tussen jquery en angular.
Dus dan wordt het een beetje moeilijk om te zeggen dat angular jquery ver voorbij is, aangezien beide andere doelen dienen.
Momenteel werk ik ook aan een nieuw formulier, als eerste heb ik dit beveiligd met php, zodra er een request word uitgevoerd zal php kijken of de waardes niet leeg zijn. Zojuist ben ik even met Javascript .validate, hiermee kun je zelf rules toevoegen en daar weer een melding aanhangen.
Quote:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["naam"])) {
$naamErr = "Het invullen van een naam is noodzakelijk";
} else {
$naam = test_input($_POST["naam"]);
// check if naam only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/", $naam)) {
$naamErr = "Alleen letters en spaties zijn toegestaan";
}
}
if (empty($_POST["naam"])) {
$naamErr = "Het invullen van een naam is noodzakelijk";
} else {
$naam = test_input($_POST["naam"]);
// check if naam only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/", $naam)) {
$naamErr = "Alleen letters en spaties zijn toegestaan";
}
}
Dus preg_match erbij
test_input is een functie die htmlspecialchars etc doet. Heb eerder gehoord dat deze functie misschien niet helemaal goed is dus die maar niet overnemen maar ik ben nu de eerste tijd vooral weer met andere dingen bezig. Moet eerst vooral mijn globale kennis nogal vergroten van php.
Quote:
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
Voor als iemand deze code herkent, ik ben hier een klein tijdje ook geregistreerd voor kort, maar wou niet mijn hele naam op het internet hebben vandaar nu deze nicknaam.
Bovenstaande code noem ik maar erbij omdat je alleen maar lijkt te controleren op lege velden en niet erop of bijvoorbeeld een telefoonnummer alleen maar uit cijfers bestaat (terwijl in je openingspost wel staat dat je dit ook wil)
Regel 16 klopt niet trouwens
Gewijzigd op 26/11/2015 20:16:33 door L deB
Let op dat je nog wel een controle doet op de correctheid van het ingevulde in PHP.
Je kijkt nu alleen of het veld leeg is.
In PHP kun je het beste dus ook nog SQL injection proberen te voorkomen.
Voorbeeldje:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Je code kan ook nog wel een stuk korter, maar zo ziet het er wel een stuk overzichtelijker uit.
Randy vsf op 26/11/2015 16:10:10:
Beter maak je validatie in javascroipt(dan heb je je realtime), en voor de zekerheid check je nog een keer alles op de server, aangezien javascript uitgeschakeld of gemanipuleerd kan worden.
Dit lijkt me inderdaad de mooiste oplossing nu voor de client side check.
Dan mag een naam dus alleen bestaan uit een combinatie van de 26 letters, eventueel aangevuld met een spatie
Beetje jammer voor Willem-Alexander dat het koppelteken er niet doorkomt.
Solène en François kunnen hun naam ook niet kwijt net als åsa of mensen die een ö of é in de naam hebben.
En er zijn ook wel namen te vinden met een ' erin.
Beetje jammer als zo'n controle te strikt is.
Het is belangrijker dat bepaalde tekens zeker niet in een naam voorkomen, zoals een <
Een lijst met alle toegestane letters is namelijk bijna niet te maken
Het blijf allebei Javascript alleen is de manier van benaderen van de DOM anders.
Maar ik zeg, bouw je validatie in Angular omdat je dan echt on the fly kan valideren en bijvoorbeeld knoppen kan verwijderen e.d om te submitten.
Je weet dat angular een framework is om een applicatie in te bouwen? Zonder het gebruik van angular controller en views etc.... ben je pure JS aan het schrijven....
Ik werk zelf nu een half jaar met angular, en vind dit echt een slecht advies...
Is zoiets als gebruik het hele symfony framework om alleen een hello world pagina te maken :)
Gewijzigd op 27/11/2015 13:41:13 door Randy vsf
Ik zal mijn vraag wat duidelijker maken:
Voor de validatie wil ik realtime controle, hieronder versta ik als iemand een veld verlaat er een controle plaats vind voor dat veld.
Als iemand meerdere velden niet invult, en toch op submit klikt er voor de lege velden een error komt.
Stel er is een error en diegene vult alsnog een goede waarde in dat er een oke status komt (maak border groen).
nu kan ik natuurlijk dit doen:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('input#firstname').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('error');
}
});
{
if( !$(this).val() ) {
$(this).parents('p').addClass('error');
}
});
Maar dan kan ik er geen verschillende teksten aanhangen, bijvoorbeeld voor een email adres.
Leeg veld: vul emailadres in
[email protected]: geen geldig email adres.
daarnaast wil zelf de meldingen kunnen stijlen en wat voor element dat het is.
Dus in je if:
$('#spanID').html('ERROR: check input');
Die span kan je met css stylen.
Gewijzigd op 27/11/2015 16:23:49 door Randy vsf
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$('input#firstname').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('error');
$(this).parents('p').html($(this).data('error'));
}
});
{
if( !$(this).val() ) {
$(this).parents('p').addClass('error');
$(this).parents('p').html($(this).data('error'));
}
});