poscode mask

Status
Niet open voor verdere reacties.
N

nl18663

Gebruiker
Lid geworden
19 dec 2007
Berichten
156
Hallo,

ik ben opzoek om in een pagina een check te doen op het mask van een postcode.
ik heb het idee dat ik iets met de string van het edit veld moet doen, normaal zou ik die als een array doorlopen om zo positie voor positie te bepalen of de waarde klopt.
maar helaas heb ik niet zoveel javascript ervaring en weet ik niet hoe ik dat moet doen.
kan mij iemand helpen hoe ik dat voor elkaar krijg om 1234AB te forseren in een veld?

alvast bedankt!
 
Je kunt eigenlijk niet voorkomen dat mensen tekst invullen die je er niet in wilt. Je kunt wel het onkeypress event gebruiken, daarin kun je kijken welk teken er toegevoegd gaat worden, dus je kunt het voorkomen. Maar dat werkt alleen voor tekst die getypt wordt. Mensen kunnen dan nog steeds tekst kopieeren en plakken, of slepen.

De waarde controleren is makkelijker:
Code: 
function isPostcode(tekst)
{
  return (tekst.search(/^[1-9][0-9]{3}[a-b]{2}$/i) > -1);
}
 
Laatst bewerkt:
hallo,
hier is de functie en hoe ik de functie aanroep op de pagina, maar ik kan nog gewoon alle toetsen indrukken? enig idee wat ik fout doe?

function isPostcode(tekst){
return (tekst.search(/^[1-9][0-9]{3}[a-b]{2}$/i) > -1);
}


<td align="center"> <input type="text" id="postcode" name="postcode" size="10" maxlength="7" value="" onKeypress"return isPostcode(this)" />
 
PHP: 
function isPostcode(tekst)
{
  return (tekst.search(/^[1-9][0-9]{3}[a-b]{2}$/i) > -1);
}

Bedoel je daar niet mee:

PHP: 
function isPostcode(tekst)
{
  return (tekst.search(/^[1-9][0-9]{3}[a-z]{2}$/i) > -1);
}

Omdat de letters van een postcode van A-Z kunnen lopen.
 
jawel, maar het moet eerst werken, als ik de pagina laad kan ik gewoon alles invoeren wat ik wil, dus het script wordt niet of niet goed geladen.
 
Dit script checkt alleen of er een postcode in de gegevens string voorkomt. Hij zorgt niet dat je geen toetsen kunt indrukken.

PHP: 
function isPostcode(tekst)
{
  return (tekst.search(/^[1-9][0-9]{3}[a-z]{2}$/i) > -1);
} 

function checkValid(input){
    if(isPostcode(input)){
        alert('Je hebt een geldige postcode ingevoerd.'); // of gewoon niets doen...
    } else {
        alert('Je hebt geen geldige postcode ingevoerd. Probeer het opnieuw.');
    }
}

In die if en else van checkValid() kun je dan doen wat je wilt dat er gebeurd bij een al dan niet goede waarde. Je kunt bijvoorbeeld ook:

PHP: 
document.getElementById('postcode').value = '';

doen.

Je moet dan wel van:

PHP: 
onKeypress"return isPostcode(this)"

maken:

PHP: 
onKeypress="checkValid(this)"

En er moest nog een '=' na onKeyPress
 
Laatst bewerkt:
ik krijg nu deze foutmelding:

Deze eigenschap of methode wordt niet ondersteund door dit object.
 
Laatst bewerkt:
Heb je de pagina online staan? Zodat we even kunnen kijken?
 
Als je nu eens die wijziging doet die ik aangaf.

Als je eens neerzet: onKeyPress="checkValid(this)"
 
Maar ik ben nu even weg. Ik zal vanmiddag nog ff kijken, als je het dan nog op dezelfde plek online hebt staan.
 
wat ik dus nu heb staan:

HTML: 
<head>
<title>SAKVR</title>
<script language="javascript" src="checkform.js" type="text/javascript"></script>
</head>
<html>
<body>
<form action="put_adres.php" name="adresinfo" method="POST" onSubmit="return checkform(this)">
<table align="center">
<tr align="center">
 <td align="center"> Straat : </td>
 <td align="center"> <input type="text" id="straat" name="adres" size="10" maxlength="50" value="" /> </td>
 </tr>
<tr align="center">
 <td align="center"> Huisnummer : </td>
 <td align="center"> <input type="text" id="huisnummer" name="huisnr" size="10" maxlength="50" value=""  /> </td>
</tr>
<tr align="center">
 <td align="center"> Postcode :  test</td>
 <td align="center"> <input type="text" id="postcode" name="postcode" size="10" maxlength="7" value="" onkeypress="checkValid(this)" /> </td>
</tr>
<tr align="center">
 <td align="center"> Woonplaats : </td>
 <td align="center"> <input type="text" id="woonplaats" name="woonplaats" size="10" maxlength="30" value="" /></td>
</tr>
<tr>
<BR />
</tr>
<tr align="center">
 <td align="center"><BR /><input type="submit" name="submit" value="Voer adres in!" /> </td>
</tr>
</form>
</body>
</html>


met in de .js:

Code: 
function isPC(tekst)      
{
  return (tekst.search(/^[1-9][0-9]{3}[a-z]{2}$/i) > -1);
}

function checkValid(input){
    if(isPC(input)){      
        alert('Je hebt een geldige postcode ingevoerd.'); // of gewoon niets doen...
    } else {
        alert('Je hebt geen geldige postcode ingevoerd. Probeer het opnieuw.');
    }
}



function checkform(form) {
    for (var x=0; form.elements[x]; x++ ) {
        if (form.elements[x].value == ""){
            if(form.elements[x].id != "nocheck") {
            alert( "Vergeten het '" + form.elements[x].id + "' veld in te vullen?" );
            form.elements[x].focus();
            return false ;
            }
        }
    }
}
 
Dit is fout. Er wordt nu een input doorgegeven aan de functie isPC, het moet een tekst zijn.
PHP: 
function checkValid(input){
    if(isPC(input)){      
        alert('Je hebt een geldige postcode ingevoerd.'); // of gewoon niets doen...
    } else {
        alert('Je hebt geen geldige postcode ingevoerd. Probeer het opnieuw.');
    }
}

Maar dit er van:
PHP: 
function checkValid(input){
    if(isPC(input.value)){      
        alert('Je hebt een geldige postcode ingevoerd.'); // of gewoon niets doen...
    } else {
        alert('Je hebt geen geldige postcode ingevoerd. Probeer het opnieuw.');
    }
}


Overigens kun je beter de checkValid(this) op de onchange event zetten. Nu wordt er gecontroleerd voordat de tekst is geupdate.

Dus dan krijg je :
HTML: 
 <input type="text" id="postcode" name="postcode" size="10" maxlength="7" value="" onchange="checkValid(this)" />
Let wel dat dit pas geroepen wordt wanneer het veld focus verliest, niet na elke key-press. Maar dat is ook gebruikers vriendelijk, anders komt er telkens een popup wanneer je bezig bent met typen (een onvoledige postcode wordt namelijk niet goedgekeurd) en wanner je een verbetering aanbrengt door bijvoorbeeld backspace te gebruiken.

En inderdaad Erik, dat bedoelde ik. Bedankt voor de verbetering :)
 
Ik zou in de javascript-aanroep "this.value" meesturen, ipv het hele object.

Hele object kan wel, maar dan moet je de parameters ook als object gaan behandelen en niet als tekst / string.

Dus:
Code: 
onchange="checkValid(this.value)"


Edit: of wat ^^ Glest beschrijft :)
 
ik kan zeggen het werkt ;-)

Helemaal Super!

maar even voor mijzelf, hoe werkt dit nu?

(tekst.search(/^[1-9][0-9]{3}[a-z]{2}$/i) > -1)

en dan vooral tussen {} ??
 
Dit deel is een regex:
/^[1-9][0-9]{3}[a-z]{2}$/i

Elke stukje apart uitgelegd:
Code: 
/                   Opent de regex
^                  Zoekt het begin van de tekst
[1-9]             Een cijfer tussen de 1 en 9 (eigenlijk een ASCII teken tussen de 1 en 9)
[0-9]             Een cijfer tussen de 0 en 9
{3}                Voorgaande komt exact 3 keer voor
[a-z]             Een ASCII teken tussen de a en z
{2}                Voorgaande komt exact 2 keer voor
$                  Zoekt het einde van de tekst
/                   Sluit regex
i                   Regex modifier, maakt regex case-insensitive (hoofdletter ongevoelig)

Als het zoekpatroon niet tussen ^ en $ zou staan dan wordt alles goedgerekend wat een postcode bevat. Door het tussen die twee tekens te zetten mag er niks meer voor of na staan.
Bijvoorbeeld: "Hey 1234AB haha" zou goedgerekend worden zonder de ^ en $.

Je kunt herhalingen ook anders doen:
Code: 
{3,5}       voorgaande komt 3 tot 5 keer voor
{3,}         voorgaande komt 3 of meer keer voor
*             voorgaande komt 0 of meer keer voor
+            voorgaande komt 1 of meer keer voor
?            voorgaande komt  0 of 1 keer voor

Een handige site als je meer wilt weten over RegEx:
http://www.regular-expressions.info/


:)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan