Invoerveld met alleen nummers toegestaan
Op onze website staat een inschrijfformulier. Bij twee invoervelden is het de bedoeling dat daar alleen nummers worden ingevuld en geen letters. Welke code moet ik dan schrijven? Nu kan er zowel tekst als nummers ingevoerd worden.
Zo staat het er nu:
<div class="form-group">
<label>IVAO ID</label>
<input name="ivao_id" type="text" id="ivao_id" maxlength="6"
class="form-control"
value="" />
Die je zoekt zit er ook bij.
https://www.w3schools.com/html/html_form_input_types.asp
Toevoeging op 14/09/2022 07:05:06:
Na het testen nog een klein probleempje.
Ik heb voor het invoerveld een max lengte opgegeven van 6 cijfers, maar ik kan er toch gewoon 20 invoeren.
Hoe kan dat?
<input name="ivao_id" type="number" id="ivao_id" maxlength="6"
https://duckduckgo.com/?q=input+min+max+values&t=newext&atb=v341-6&ia=web
https://www.w3schools.com/tags/att_input_min.asp
<input name="ivao_id" type="number" id="ivao_id" max="999999">
Toevoeging op 14/09/2022 09:14:03:
en eventueel min="0" om te voorkomen dat iemand -9999999999999999 opgeeft.
(ah, adoptive was me inmiddels al voor)
Gewijzigd op 14/09/2022 09:14:44 door Ivo P
Maar dan kan ik dus zowel 6 letters als 6 cijfers plaatsen en meer niet.
Als ik dan type=text verander in type=number, dan kan ik geen letters meer plaatsen en alleen nummers.
Dat is op zich dus goed, maar ik kan dan wel weer 25 nummers invoeren.
Hoe zorg ik er nu voor dat ik maar 6 cijfers in kan voeren?
Let op je spelfout daarin.
Toevoeging op 14/09/2022 11:58:54:
En vergeet ook niet serverside te controleren. HTML is door een bezoeker eenvoudig te manipuleren.
Ik kan nog steeds meer dan 20 nummers invullen.
Ook niet zoals Ariën zegt over de spelfout maxlength="6
Nu staat het zo: maar kan nog steeds meer dan 20 nummers invullen.
<div class="form-group">
<label>IVAO ID</label>
<input name="ivao_id" type="number" id="ivao_id" maxlength="6"
class="form-control"
Zo ook niet:
<div class="form-group">
<label>IVAO ID</label>
<input name="ivao_id" type="number" id="ivao_id" max="999999" min="0"
class="form-control"
Zo ook niet:
<div class="form-group">
<label>IVAO ID</label>
<input name="ivao_id" type="number" id="ivao_id" min="0" max="6"
class="form-control"
Toevoeging op 14/09/2022 14:18:33:
https://jsfiddle.net/pehaict/4qcksyw2/
Daar kun je zien hoe de html5 beveiliging hier werkt: je krijgt een melding dat form niet gesubmit kan worden met deze foute waarde erin.
Wil je het on the fly bijwerken, dan kun je met javascript dat oplossen (onkeyup en/of onchange)
Toevoeging op 14/09/2022 14:25:22:
https://jsfiddle.net/pehaict/byjqwuc0/4/
jsfiddle aangepast: nu met jQuery oplossing voor de 2e input.
Zodra er meer dan 3 tekens staan, zal hij het afkappen
Gewijzigd op 14/09/2022 15:27:19 door Ivo P