HTML5 - symbool <input>
Voor mijn site wil ik de volgende zaak regelen:
Als een postcode (moet) worden ingevuld van is de enige juiste invoer volgens het sjabloon 9999 AA, oftewel 4 cijfers, een spatie en twee HOOFDletters.
Weet iemand hoe ik dit kan realiseren? Het symbool <input> kent geen sjablonen
George
Code (php)
1
<input type=text pattern="\d{4} [A-Z]{2}" name=postcode title="Een postcode bestaat uit 4 cijfers gevolgt door een spatie en daar 2 hoofdletters">
Alleen dat werkt nog niet in elk browser, dus controleer ook altijd in PHP of JS!
Is Pattern een optie van het <input>-element?
Toevoeging op 29/05/2012 18:30:41:
Reshadd gaf aan om met preg_match aan de gang te gaan. Ik heb geen flauw idee wat de functie doet en hoe ik dit moet inpassen in mijn PHP. Ik wil dit soort functies eigenlijk als eigen functie opnemen in mijn bibliotheek
Wouter J op 29/05/2012 17:55:58:
HTML5 kent wel sjablonen:
Alleen dat werkt nog niet in elk browser, dus controleer ook altijd in PHP of JS!
Code (php)
1
<input type=text pattern="\d{4} [A-Z]{2}" name=postcode title="Een postcode bestaat uit 4 cijfers gevolgt door een spatie en daar 2 hoofdletters">
Alleen dat werkt nog niet in elk browser, dus controleer ook altijd in PHP of JS!
Ik hoop dat je bedoelt PHP en JS.
php is noodzakelijk! niet iedereen heeft javascript ingeschakeld en er zijn zelfs nog browsers in de omloop die het niet ondersteunen dacht ik (zijn wel oude browsers).
wat mij nu net te binnen schiet: is het niet mogelijk om de php-validatie in het no-script van een pagina te zetten? dan kan je voor die mensen die geen js hebben gewoon gegevens controleren en aangeven wat er fout gaat. anders doet de js het wel?
Als je wilt valideren is php vereist en javascript een nicetohave en gebruiksvriendelijker voor je bezoekers. Javascript kan je met wat extensies of bij sommige browsers helemaal makkelijk via het menu uitschakelen nadat je de pagina hebt ingeladen.
Nog even een toevoeging:
Dit geld ook als je via html5 valideert.
Gewijzigd op 30/05/2012 09:08:32 door Terence Hersbach
HTML5 valideren kun je niet uitschakelen, maar in sommige browsers werkt het nog niet (meer info). Daarom zei ik ook dat je beter JS of PHP ernaast kunt hebben om zeker te zijn van je taak.
George:
Is Pattern een optie van het <input>-element?
Ja, anders vertel ik het niet...
George:
Reshadd gaf aan om met preg_match aan de gang te gaan. Ik heb geen flauw idee wat de functie doet en hoe ik dit moet inpassen in mijn PHP. Ik wil dit soort functies eigenlijk als eigen functie opnemen in mijn bibliotheek
Kijk eens bij de PHP documentatie over wat hij teruggeeft en wanneer: preg_match
Vervolgens plaats je als pattern (eerste parameter) die string die ik gaf met / ervoor en erna en als 2e parameter de value van het inputveld.
Wouter J op 30/05/2012 11:12:04:
Terence, JS is makkelijk uit te schakelen maar dat gebeurd echt bijna nergens.
Gaat er niet om dat het bijna nooit gebeurd, gaat er om dat je geen rare waardes toegestuurd krijgt van kwaadwillende gebruikers. Puur veiligheid en zeker zijn over wat voor zooi je toegestuurd krijgt.
En ja, die HTML5 validatie kan je ook wel omzeilen hoor :)
Na jullie suggesties goed te hebben doorgelezen heb ik de volgende functie ontwikkeld om een ingevoerde postcode zo volledig mogelijk te checken en te converteren.
Opmerkingen en suggesties zijn van harte welkom
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
function ValideerPostcode($cPostcode) {
// Haal alle verboden tekens er uit
$cVerboden = array(" ","@","#","$","%","^","&","*","(",")","<",">","?","'","-","_","!",",");
$cVervangen = "";
$cPostcode = str_replace($cVerboden,$cVervangen,$cPostcode);
// Converteer de letters naar HOOFDletters
$cPostcode = strtoupper($cPostcode);
// Controleer of de overgebleven string uit 6 posities bestaat
if(strlen($cPostcode != 6)) {
$lPostcode = false;
} else {
// Lengte postcode is ok
// Zet de postcode in juist format (9999 AA)
$cPostcode = substr($cPostcode,0,4)." ".substr($cPostcode,4,2);
if(!preg_match('/^[1-9]{1}[0-9]{3} [A-Z]{2}$/', $cPostcode)) {
$lPostcode = false;
} else {
$lPostcode = true;
}
}
return($lPostcode);
}
// Haal alle verboden tekens er uit
$cVerboden = array(" ","@","#","$","%","^","&","*","(",")","<",">","?","'","-","_","!",",");
$cVervangen = "";
$cPostcode = str_replace($cVerboden,$cVervangen,$cPostcode);
// Converteer de letters naar HOOFDletters
$cPostcode = strtoupper($cPostcode);
// Controleer of de overgebleven string uit 6 posities bestaat
if(strlen($cPostcode != 6)) {
$lPostcode = false;
} else {
// Lengte postcode is ok
// Zet de postcode in juist format (9999 AA)
$cPostcode = substr($cPostcode,0,4)." ".substr($cPostcode,4,2);
if(!preg_match('/^[1-9]{1}[0-9]{3} [A-Z]{2}$/', $cPostcode)) {
$lPostcode = false;
} else {
$lPostcode = true;
}
}
return($lPostcode);
}
Laat het ze gerust typen, en bouw het zelf om.
Net als hoofdletters... als mensen het klein typen is dat toch geen probleem?
En de genoemde letters van Terence Hersbach is inderdaad zeker iets om mee te nemen.