Call function 3 only after functions 1 and 2 are done

Question

How do i make sure function createOverzicht only is excecuted after functions checkNotEmpty and checkNumber are done, now if i click on the button function createOverzicht its called, but thats not supposed to happen, createOverzicht is only supposed to be called after the first two functions or done. In this case i have a form and the first two functions are to validate the input, so thats why i dont want createOverzicht o excecute when there is nothing filled in

so to simplify the concept this is what i mean:

 function createOverzicht() { if (checkNotEmpty && checkNumber) { alert('hi'); }; else { //do nothing }; } function checkNotEmpty(field, span) { if (field.value.length > 1 && isNaN(field.value)) { document.getElementById(span).className = 'goed'; document.getElementById(span).innerHTML = '<img src=\\'../img/ok.png\\'>'; } else { document.getElementById(span).className = 'nietgoed'; document.getElementById(span).innerHTML = '<img src=\\'../img/notok.png\\'>'; }; }; function checkNumber(field, span) { if (field.value.length == 10 && !isNaN(field.value)) { document.getElementById(span).className = 'goed'; document.getElementById(span).innerHTML = '<img src=\\'../img/ok.png\\'>'; } else { document.getElementById(span).className = 'nietgoed'; document.getElementById(span).innerHTML = '<img src=\\'../img/notok.png\\'>'; }; }; function createOverzicht() { alert('hi'); } window.onload = function() { document.getElementById('naam').oninput = function() { checkNotEmpty(this, 'meldingNaam'); }; document.getElementById('achternaam').oninput = function() { checkNotEmpty(this, 'meldingAchternaam'); }; document.getElementById('telefoonnummer').oninput = function() { checkNumber(this, 'meldingTel'); }; document.getElementById('overzicht').onclick = function() { createOverzicht() }; }; 

Answer 1

As far as I can see you have two options:

1) store the status(valid or invalid) of each input

This could be hard to maintain!!

2) Inside "createOverzicht" call a function that check if everything is Ok

This alternative will imply make some changes in the functions that validate, you will need that they return true if the field is valid or by the contrary false; also add some code at the beginning of "createOverzicht". The implementation will look like:

function createOverzicht() {       
    checkNotEmpty(document.getElementById('naam'), 'meldingNaam');    
    checkNotEmpty(document.getElementById('achternaam'),'meldingAchternaam');
    checkNumber(document.getElementById('telefoonnummer'), 'meldingTel');    
    alert('hi');
}
function checkNotEmpty(field, span) {
    if (field.value.length > 1 && isNaN(field.value)) {
        document.getElementById(span).className = 'goed';
        document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
        return true;
    } else {
        document.getElementById(span).className = 'nietgoed';
        document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
        return false;
    };
};

function checkNumber(field, span) {
    if (field.value.length == 10 && !isNaN(field.value)) {
        document.getElementById(span).className = 'goed';
        document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
        return true;
    } else {
        document.getElementById(span).className = 'nietgoed';
        document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
        return false;
    };
};

May be use a javascript library like jQuery for this, the jQuery Validator plugging will help you a loot.

Answer 2

You need to move the call to createOverzicht() like this:

function myFunction() {
  if (checkNotEmpty && checkNumber) {
    createOverzicht();
  };
  else {
    //do nothing
  };
}

Also the checkNotEmpty and checkNumber functions need to return a Boolean value.