JS validation mistakes

Question

I got a problem with my validation of textboxes. I am trying to get something like this.

Click on the button, give a message when something is not filled in, while you fill the empty textbox, the 1 message of that textbox should dissapear.

If you click the button again, with 1 empty textbox, only the message of that textbox should appear.

If you click it twice with nothing filled, it should only appear once ...

I messed something up here ... can someone get me on again?

Thank you in advance!

var list2 = [];
function valideer(el) {
 
    divOutput = document.getElementById("msgbox1");
    var strValideer = "";

    if (document.getElementById("naam").value === "") {
        list2.push("naam");
    } if (document.getElementById("voornaam").value === "") {
        list2.push("voornaam");
    } if (document.getElementById("straatnr").value === "") {
        list2.push("straatnr");
    } if (document.getElementById("postgem").selectedIndex === 0) {
        list2.push("postgem");
    } if (document.getElementById("telgsm").value === "") {
        list2.push("telgsm");
    } if (document.getElementById("email").value === "") {
        list2.push("email");
    }

    for (var i = 0; i < list2.length; i++) {
        strValideer += "" + list2[i] + ": verplicht veld";
    }
    strValideer += "";
    divOutput.innerHTML = strValideer;
}

function inputChange(el) {
    divOutput = document.getElementById("msgbox1");
    strValideer = "";
    var naam = document.getElementById("naam").value;
    if (naam !== "") {
        list2.splice(list2.indexOf(el.name), 1);
    }
    for (var i = 0; i < list2.length; i++) {
        strValideer += "" + list2[i] + ": verplicht veld";
    }
    strValideer += "";
    divOutput.innerHTML = strValideer;
}




    
   
    
    
    
    


    
        
            
                Persoonlijke gegevens
                
                    
                        
                            
                                naam:
                                
                                    
                                
                            
                            
                                voornaam:
                                
                                    
                                
                            
                            
                                straat+nr:
                                
                                    
                                
                            
                            
                                post+gem:
                                
                                    
                                
                            
                            
                                tel/gsm:
                                
                                    
                                
                            
                            
                                email:
                                
                                    
                                
                            
                            
                        
                        
                            
                                

                                    
                                
                            
                        
                            
     
                            
                            
                        
                    
                
                    
            
          
            
               
                
                    
                        
                            
                            
                                
                                
                            
                            
                                
                                
                            
                            
                                
                                
                            
                            
                                
                            
                        
                        
                            
                        
                        
                        
                    
                    
                
            
        
    
    
        © 2013 The Wood Factory

Chirag Ravindra · Accepted Answer

I feel like your approach is a little more complicated than it needs to be.. See my attempt below

function valideer(current) {
  var ids = ['naam', 'voornaam', 'straatnr', 'postgem', 'telgsm', 'email'];
  var str = '';
  ids.forEach(function(id) {
    var el = document.getElementById(id);
    if (el.value === '' && el !== current) {
      str += "" + id + ": verplicht veld";
    }
  });
  str += '';
  var outputDiv = document.getElementById("msgbox1");

  outputDiv.innerHTML = str;
}

function handleFormSubmit(ev) {
  ev.preventDefault();
  valideer();
  return false;
}





  

  
  
  
  



  
    
      
        Persoonlijke gegevens
        
          
            
              
                naam:
                
                  
                
              
              
                voornaam:
                
                  
                
              
              
                straat+nr:
                
                  
                
              
              
                post+gem:
                
                  
                
              
              
                tel/gsm:
                
                  
                
              
              
                email:
                
                  
                
              
              
            
            
              
                

                
              
            
            
              

              
              
            
            
          
        
      

      

        
          
            
              

                
                
              
              
                
                
              
              
                
                
              
              
                
              
            
            
              
            
            
              
            
            
          
          
        
      
    
  
  
    © 2013 The Wood Factory

Some notes and observations:

Since the only check being used for validation is if it contains, an empty string, I have generalised the valideer function to iterate and operate on a given array of ids. This can be made even better by querying for inputs on your form using a DOM query and handling it like that.
You have added a lot of inline event handlers in your dom.. Some of them are redundant and not really needed. For example, having a simgle onsubmit on your form element should suffice (no need to add it for every input inside the form)
You were using a global variable list2 this is what was causing the repeated entries each time you click the button. Localising the scope would fix that (by moving it inside a function)

JS validation mistakes

Answers (2)

Related Questions