Een controle op <input type=number

Door Paco de Wulp op 07-06-2015 21:09

7.657 views

Wat is een goede manier om een numeriek veld te controleren, zowel in javascript als in PHP ??

Als ik nu in een numeriek veld 'aaa' invul, dan wordt daar een 0 van gemaakt en een 0 is toegestaan in mijn controles.

Frank Nietbelangrijk

07-06-2015 21:14

Indien er decimalen gebruikt mogen worden dan kun je in PHP controleren met is_nummeric() en indien het echt alleen cijfers mogen zijn (en dus geen decimale punt) dan zou je kunnen controleren met ctype_digit()

Ariën

07-06-2015 21:16 gewijzigd op 07-06-2015 21:17

Voor PHP hebben we is_numeric() en ctype_digit:
http://php.net/is_numeric en http://php.net/manual/en/function.ctype-digit.php

En voor HTML 5 hebben we:


<form action="iets.php">
Aantal: <input type="number" name="aantal">
  <input type="submit" value="Versturen">
</form>

De ondersteuning hiervan is inmiddels erg breed: http://caniuse.com/#search=number

Frank Nietbelangrijk

07-06-2015 21:17

EDIT: of met regular expressions. Die kunnen ook in javascript gebruikt worden.

Onthoud wel dat PHP validatie belangrijker is dan javascript.

Paco de Wulp

07-06-2015 23:35 gewijzigd op 07-06-2015 23:39

Ik stelde mijn vraag niet goed.

Als ik nu in een numeriek veld 'aaa' invul, dan wordt daar een 0 van gemaakt en een 0 is toegestaan in mijn controles.

Ik bedoelde: hoe blokkeer ik een numeriek inputveld van niet numerieke tekens. Ik vind het niet netjes dat gebruikers in een numeriek veld ook letters in kunnen vullen, wat dan vervolgens resulteert in een nul-waarde, omdat het een type=number is.
Vangen jullie dat af (hoe dan?) of vinden jullie dat geen problem ?

[size=xsmall]Toevoeging op 07/06/2015 23:38:26:[/size]

Dus hoe los ik dit op aan de clientside ?

Ozzie PHP

08-06-2015 01:26

Even Googlen doet wonderen ;)

Geen idee of dit de béste methode is, maar dit is denk ik wat jij bedoelt:

http://jsfiddle.net/Vj2Kk/2/

Ward van der Put

08-06-2015 07:06

IN HTML5 kun je het inputtype number gebruiken:

<input type="number">

Daaraan kun je een minimum en/of maximum toevoegen:

<input type="number" min="1">

Of:

<input type="number" min="1" max="100">

Verder kun je er nog een stapgrootte aan toevoegen. Voor veelvouden van 1 bijvoorbeeld:

<input type="number" min="1" max="100" step="1">

Frank Nietbelangrijk

08-06-2015 08:36

En in PHP blijft mijn en Aar zijn eerdere suggestie van pas komen.

<?php
if(!ctype_digit($aantal)) // er mogen alleen cijfers gebruikt worden dus ook een nul :-)
{
//fout
}
?>

Jacco Engel

08-06-2015 10:16

Ozzie PHP op 08/06/2015 01:26:01

Even Googlen doet wonderen ;)

Geen idee of dit de béste methode is, maar dit is denk ik wat jij bedoelt:

http://jsfiddle.net/Vj2Kk/2/

Waarom die isNumber functie :)? Daar heeft JS gewoon isNaN voor ingebouwd (isNotANumber)

Let er wel op dat dit een omgekeerde controle is dus true als het GEEN nummer is en false als het wel een nummer is. Als je dus is_numeric van php functionaliteit wil bereiken moet je !isNaN(nummer) doen

Paco de Wulp

08-06-2015 10:46 gewijzigd op 08-06-2015 11:02

@Ward: Allemaal leuk en aardig, maar HTML5 wordt nog lang niet ondersteund door alle browsers. Dus dan zou je buiten de HTML5 checks, zoals jij voorstelt ook nog javascript checks moeten doen. Of te wel HTML5 checks kunnen net zo goed niet worden toegepast. Toch ?
@Ozzie: Ik gebruik geen jQuery, maar zou het op die manier ook met javascript kunnen doen.
@Frank: Wanneer ik 'aaa32' in het numerieke veld invoer (<input type=number), dan is het in PHP (serverside)al een nul-waarde geworden. Natuurlijk doe ik in PHP checks op een geldige numerieke waarde.

Ik moet de 'aaa32' dus opvangen op cliëntside met Javascript of HTML5.
Voorstel van Ozzie is een oplossing (backspace, indien er een verkeerd teken wordt ingevoerd), maar ik zag ergens (weet niet meer waar) een oplossing zodat er in zijn geheel geen vreemde tekens konden worden ingevuld, totaal geblokkeerd, m.b.v. event onkeypress="return function();". Dit laatste lijkt me een mooie oplossing. Iemand zo'n oplossing voorhanden ? :-)

[size=xsmall]Toevoeging op 08/06/2015 11:00:07:[/size]


<html>
<script>
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
</script>

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
</html>

Maar kan geloof ik ook maar alleen onder HTML5 werken !! mmmmmm

Ward van der Put

08-06-2015 11:28

Paco de Wulp op 08/06/2015 10:46:41

@Ward: Allemaal leuk en aardig, maar HTML5 wordt nog lang niet ondersteund door alle browsers. Dus dan zou je buiten de HTML5 checks, zoals jij voorstelt ook nog javascript checks moeten doen. Of te wel HTML5 checks kunnen net zo goed niet worden toegepast. Toch ?

Ja, dat is waar. Alleen mag de uiterste consequentie niet zijn dat je helemaal geen HTML5 gebruikt zolang er nog browsers zijn die HTML5 niet ondersteunen.

Ik denk dat je in dergelijke gevallen dus voor een compromis moet kiezen:

+ HTML5 voor moderne browsers
+ een fallback in JavaScript voor andere browsers
+ per definitie altijd een server-side validatie.

In HTML5 kun je overigens ook nog een pattern gebruiken bij een input, bijvoorbeeld voor bedragen met komma's. Alleen heeft dat hetzelfde nadeel: het is en blijft HTML5.

Voorbeelden: http://html5pattern.com/Miscs

Reageren

Inloggen om te reageren