Valideer input
Hallo,
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?
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 makkelijkste manier is jquery
de veiligste manier is php
be beste manier is beiden
de veiligste manier is php
be beste manier is beiden
En met beide bedoel je:
php controleert en jquery pakt de error over en voegt de elementen met error meldingen toe aan je html?
php controleert en jquery pakt de error over en voegt de elementen met error meldingen toe aan je html?
Het ligt er vooral aan hoe moeilijk je het jezelf wilt maken.
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.
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.
@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?
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.
Hallo Peter,
Wat ik nu met php heb is:
de HTML:
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?
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?
Realtime gaat irritant worden, iedere keer een request als er een veld gevuld is.
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.
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
Het beste is tegenwoordig met AngularJS.
Die gaat Jquery ver voorbij.
Mooiste van al... je hebt jquery lite tot je beschikking in Angular.
Die gaat Jquery ver voorbij.
Mooiste van al... je hebt jquery lite tot je beschikking in Angular.
@rickert,
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.
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.
@Bryan
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.
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.
Zelf gebruik ik o.a. het volgende bij validatie:
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.
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
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
Bryan,
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:
Je code kan ook nog wel een stuk korter, maar zo ziet het er wel een stuk overzichtelijker uit.
Dit lijkt me inderdaad de mooiste oplossing nu voor de client side check.
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.
if (!preg_match("/^[a-zA-Z ]*$/", $naam)) {
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
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
@Randy vsf het is niet dat jquery voorbij is maar met angular kan je 100x meer dan jquery + je hebt jquery lite tot je beschikking in angular js.
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.
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.
@rickert,
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 :)
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
Dank voor de vele reactie's :)
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:
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.
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.
Zet een span of iets onder je input, en vul die als er een foutmelding is :)
Dus in je if:
$('#spanID').html('ERROR: check input');
Die span kan je met css stylen.
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
<input id="firstname" data-error="custom error text" name="firstname">




