Een fout telefoonnummer voorkomen zonder blokkeren

Het doel is een nummer waarmee je iemand kan opvolgen, niet een nummer dat aan jouw favoriete schrijfwijze voldoet. Een formaatcontrole ziet alleen of de tekens plausibel zijn. Ze bewijst niet dat het nummer bestaat of van de bezoeker is.

Begin daarom met drie vragen. Heb je het nummer echt nodig, of volstaat een e-mailadres? De W3C-handleiding over toegankelijke formulieren stelt dat je alleen moet vragen wat nodig is om de transactie of het proces af te ronden, omdat gebruikers bij irrelevante of overmatige gegevensvragen eerder afhaken. Of een telefoonnummer nodig is, volgt uit jouw eigen proces, niet uit die bron. Wie belt of sms't er, en naar welk land? En wat doet je team met het nummer: bellen, sms'en of bewaren in een klantenbestand? Het antwoord bepaalt hoe streng je moet zijn.

Schrijf die keuze op in één zin, bijvoorbeeld: 'We willen een nummer waarmee we binnen de werkweek kunnen terugbellen.' Elke regel in het formulier moet die zin dienen. Een regel die dat niet doet, schrap je.

Maak een testlijst met schrijfwijzen die echte bezoekers gebruiken en voer ze een voor een in het live formulier in. Noteer per invoer wat er gebeurt: aanvaard, geweigerd of omgezet, en welke melding verschijnt.

• 0471 23 45 67, 0471/23.45.67 en 0471234567
• +32 471 23 45 67, +32471234567 en 0032 471 23 45 67
• +32 (0)471 23 45 67, met de nul tussen haakjes
• 02 123 45 67 als vast nummer
• Een buitenlands nummer, bijvoorbeeld met +31 of +33 ervoor
• Een nummer met een spatie vooraan of achteraan, zoals bij kopiëren en plakken

Zoek daarna de bron van elke weigering: een patroonattribuut in de HTML, een script of de server. De cursus Learn Forms van web.dev heeft onderdelen over internationale gegevensformaten en over het testen van formulieren, handig als naslag bij je eigen testlijst. Test ook op een telefoon, want daar hangt het toetsenbord af van het veldtype. Een voorbeeldtekst in het veld die maar één schrijfwijze toont, kan bezoekers ongemerkt naar dat formaat duwen.

Een bruikbare opbouw scheidt wat de browser doet van wat de server beslist.

1. Veld: gebruik een telefoonveldtype en het bijbehorende autofill-attribuut, zodat toetsenbord en automatisch invullen kunnen helpen. Voeg geen strikt patroon toe dat één schrijfwijze afdwingt.
2. Lichte controle in de browser: haal voor de controle spaties, punten, streepjes, schuine strepen en haakjes weg en kijk of er een plausibel aantal cijfers overblijft. Bepaal ondergrens en bovengrens samen met wie het nummer gebruikt en test ze met je eigen lijst.
3. Controle en normalisatie op de server: herhaal dezelfde controle en sla één vaste vorm op, naast de oorspronkelijke invoer.

Waarom beide? MDN over validatie in de browser beschrijft die als een eerste controle waarmee bezoekers meteen kunnen corrigeren, maar niet als volledige beveiliging, omdat ze te makkelijk te omzeilen is. Valideer dus ook op de server. Bewaar de oorspronkelijke invoer: als je normalisatie een fout bevat, kan je terugrekenen.

Beslisregel: blokkeer alleen het verzenden als je zonder nummer echt niet verder kan. Is het nummer optioneel, laat dan ook een twijfelgeval door met een zichtbare waarschuwing. Verwacht je regelmatig buitenlandse bezoekers, overweeg dan een keuzeveld voor het land.

Een goede melding zegt wat er mis lijkt en wat de bezoeker kan doen. Vergelijk 'Ongeldig nummer' met: 'Dit lijkt te kort. Een Belgisch gsm-nummer in de schrijfwijze met nul vooraan heeft doorgaans tien cijfers, bijvoorbeeld 0471 23 45 67 (controleer dit voor jouw doelgroep, want vaste nummers wijken af). Woon je in het buitenland, begin dan met + en je landcode.' Toon de melding bij het veld zelf, wis niets van wat de bezoeker typte en maak duidelijk dat het veld opnieuw bewerkt kan worden.

Fictief overdrachtsvoorbeeld voor de bouwer (alleen invoer en verwachte controles):

• Invoer 0471/23.45.67 met land België: geen melding, opslag als +32471234567, oorspronkelijke tekst bewaard.
• Invoer +31 6 12 34 56 78: geen melding, opslag als +31612345678.
• Invoer 0471 23: hint zichtbaar bij het veld, tekst blijft staan, de rest van het formulier blijft ingevuld.
• Invoer met een spatie vooraan: aanvaard na het wegknippen van de spatie.

Herhaal na elke aanpassing de testlijst uit de diagnose, op een computer en op minstens één telefoon. Controleer dan:

• of elke invoer uit de beslistabel het verwachte resultaat geeft;
• of de server dezelfde keuze maakt als het script, bijvoorbeeld door het script tijdelijk uit te zetten en opnieuw te testen;
• of foutmeldingen bij het juiste veld staan en toegankelijk zijn;
• of het opgeslagen nummer in je opvolgsysteem bruikbaar is voor je team.

Grenzen: de bronnen zijn algemene richtlijnen voor formulieren, geen regels voor Belgische nummerplannen, en een browsertest toont niet wat je server doet. Of minder bezoekers afhaken, kan je alleen met je eigen gegevens nagaan.

Wil je zien welke publieke signalen je website rond formulieren en opvolging geeft? Bekijk ze via Marketing Scan. Een publieke scan ziet alleen wat zichtbaar is en bewijst niet hoe jouw server een nummer verwerkt.