Invoerveld met alleen nummers toegestaan

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Martin Roelofs

Martin Roelofs

13/09/2022 20:47:13
Quote Anchor link
Beste forumleden,

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="
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php echo htmlspecialchars($ivao_id)?>
" />
 
PHP hulp

PHP hulp

06/12/2022 01:38:05
 
Adoptive Solution

Adoptive Solution

13/09/2022 21:39:43
Quote Anchor link
Overzicht van input types.
Die je zoekt zit er ook bij.
https://www.w3schools.com/html/html_form_input_types.asp
 
- Ariën  -
Beheerder

- Ariën -

13/09/2022 21:40:30
Quote Anchor link
En in PHP controleren met is_numeric.
Let wel even op wat er wordt geaccepteerd.
 
Martin Roelofs

Martin Roelofs

13/09/2022 22:35:23
Quote Anchor link
Hartelijk dank! Gelukt!

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"
 
Adoptive Solution

Adoptive Solution

14/09/2022 08:58:05
 
Ivo P

Ivo P

14/09/2022 09:13:33
Quote Anchor link
Werkt het wel als je in plaats daarvan de max-waarde opgeeft (6 negens)
<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
 
Martin Roelofs

Martin Roelofs

14/09/2022 11:33:30
Quote Anchor link
Het lukt nu wel maxlenght="6"
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?
 
- Ariën  -
Beheerder

- Ariën -

14/09/2022 11:52:32
Quote Anchor link
maxlength="6

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.
 
Martin Roelofs

Martin Roelofs

14/09/2022 12:46:52
Quote Anchor link
Het lukt nog steeds niet.
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"
 
Ivo P

Ivo P

14/09/2022 14:12:53
Quote Anchor link
je hebt vrij consequent geen afsluitenden > bij je <input tag?

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
 
Martin Roelofs

Martin Roelofs

14/09/2022 15:46:17
Quote Anchor link
Thanks!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.