registratieformulier.js

/* 
 * Deze functie gebruikt de gratis Postcode.nl API om een huisnummer
 * en postcode aan te vullen tot een volledig adres
 */
var xhr;
function getAddress(callback, postcode, nummer, toevoeging)
{
    /* 
     * Als er al een XMLHTTPRequest aan de gang is, zet deze stop zodat
     * de nieuwe waarde niet overschreven kan worden door een oude
     */
    if (xhr)
        xhr.abort();
    xhr = new XMLHttpRequest();
    // Roep PHP-scriptje aan vanwege Same-Origin Policy
    var url = 'backend/adres.php?postcode=' + postcode + '&nummer=' + nummer;
    if (toevoeging && toevoeging != '')
        url += '&toevoeging=' + toevoeging;
    xhr.open('GET', url);
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4)
            callback(JSON.parse(xhr.responseText));
    };
    xhr.send();
}

function completeAddress(postcode)
{
    var huisnummer = document.getElementById('regformid').huisnummer.value;
    var toevoeging = document.getElementById('regformid').toevoeging.value;
    
    getAddress(function(adresInfo)
    {
        if (adresInfo && !adresInfo.exception)
        {
            document.getElementById('regformid').straat.value = adresInfo.street;
            document.getElementById('regformid').plaats.value = adresInfo.city;
        }
        else
        {
            document.getElementById('regformid').straat.value = document.getElementById('regformid').plaats.value = '';
        }
    }, postcode, huisnummer, toevoeging);
}

//http://www.randomsnippets.com/2008/04/01/how-to-verify-email-format-via-javascript/

function checkPostcode(){
    var validPostcode = /^[0-9]{4}[\s-]?[a-z]{2}$/i;
    var postcode = document.getElementById('postcode').value;
    var postcodeLabel = document.getElementById('postcode-label');
    if (!validPostcode.test(postcode))
        error(postcodeLabel, 'Dit is geen geldige postcode.');  
    else{
        if(postcode.charAt(4)==" " || postcode.charAt(4)=="-"){
            postcode = postcode.substring(0,4)+postcode.substring(5);
            ok(postcodeLabel, 'Dit is een geldige postcode.');
        }
        else{
            ok(postcodeLabel, 'Dit is een geldige postcode.');
        }
    }
    completeAddress(postcode);  
}
function checkNaam(field, label){
    var validNaam = /^[a-z\s\-\']{1,256}$/i
    var naam = document.getElementById(field).value;
    var naamLabel = document.getElementById(label);
    if(!validNaam.test(naam))
        error(naamLabel, 'Geen geldige naam.');
    else
        ok(naamLabel);
}
function checkTel(){
    var validTel1 = /^[0-9]{2,4}$/;
    var validTel2 = /^[0-9]{6,8}$/;
    var validTelTot = /^[0-9]{10}$/;
    var fieldVal = document.getElementById('tel').value;
    var fieldVal2 = document.getElementById('tel2').value;
    var telLabel = document.getElementById('tel-label');
    var telNummerTotaal = fieldVal + fieldVal2;
    if(validTel1.test(fieldVal) && validTel2.test(fieldVal2) && validTelTot.test(telNummerTotaal)){
        ok(telLabel, 'Dit is geen geldig telefoon nummer');
    }
    else
        error(telLabel);
}
function checkHuis(){
    var validHuis = /^[0-9]{1,5}$/;
    fieldVal = document.getElementById('huisnummer').value;
    var huisLabel = document.getElementById('huisnummer-label');
    if(validHuis.test(fieldVal)){
        ok(huisLabel);
    }
    else
        error(huisLabel, 'Geen geldig huisnummer.');
    checkPostcode();        
}
function check(field, divLabel, msg){
    //alert("started");
    var labelPos = document.getElementById(divLabel);
    var fieldVal = document.getElementById(field);
    if(fieldVal==undefined || fieldVal.value==""){
        //alert("NULL!" + fieldVal);
        error(labelPos, msg);
    }
    else{
        //alert("Niet NULL!" + fieldVal);
        ok(labelPos, msg);
        
    }   
}
function checkMail(){
        //alert("derp");
        var validMail=/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
        var mailFieldVal = document.getElementById('email');
        var labelPos = document.getElementById('email-label');
        if(!validMail.test(mailFieldVal.value) || mailFieldVal.value=="" || !mailFieldVal.value){
            error(labelPos, 'Dit is geen geldig e-mail adres');
        }
        
        else{
            ok(labelPos, 'Dit is een geldig e-mail adres');
        }
}

function verify(field1, field2, divLabel){
    var field1Val = document.getElementById(field1).value;
    var field2Val = document.getElementById(field2).value;
    var labelPos = document.getElementById(divLabel);
    
    if(field1Val != field2Val){
        error(labelPos, 'Velden zijn niet hetzelfde');
    }
    else if (field2Val != ""){
        ok(labelPos, 'Velden zijn hetzelfde.');
    }   
}

function ok(labelPos, msg){
    var melding;
    if(msg==undefined)
        melding = "Dit veld is correct ingevuld.";
    else
        melding = msg;
        
    labelPos.style.backgroundImage="url('images/labels/ok-label.png')";
    labelPos.title = melding;
    labelPos.style.backgroundRepeat="no-repeat";
}
var isValidForm = true;
function error(field, msg){
    var labelPos = field;
    var melding;
    if(msg==undefined)
        melding = "Dit veld mag niet leeg zijn.";
    else
        melding = msg;
        
    labelPos.style.backgroundImage = "url('images/labels/warning-label.png')";
    labelPos.title = melding;
    labelPos.style.backgroundRepeat="no-repeat";
    isValidForm = false;
}

function submitThisShit(){
    var form = document.getElementById('regformid');
    isValidForm=true;
    checkNaam('voornaam', 'voornaam-label');
    checkNaam('achternaam', 'achternaam-label');
    checkHuis();
    checkPostcode();
    check('straatid', 'straat-label', 'Uw postcode-huisnummer combinatie bestaat niet.');
    checkTel();
    checkMail();
    verify('email','email-bevestigen','email-bevestigen-label');
    check('wachtwoord','wachtwoord-label');
    verify('wachtwoord','wachtwoord-bevestigen','wachtwoord-bevestigen-label');
    
    if(isValidForm){
        document.getElementById('regformid').action="gebruikers-registratie.php";
        return true;
    }
    else{
       return false;
    }
}