Javascript form validation onclick button no error yet not working either

Question

So the title pretty much says it all. The function validateForm is the one im having trouble with. Im trying to check to see if a field has not been entered then post a message (span tag) already there, yet i hide it using css. So i want that span tag that is hidden to show if one of the input fields have not been touched. I have functions to do the first name, last nam, email and phone number. I was also going to validate the check boxs and text areas in the validateform function as well. As this is a rather large website, some code will not be shown. But if you can spot the error i would greatly appreciate it.





    NONEYA
    
    

    

    

    
    

    
    
    
    




    
    

    
    

    
    

        
        

            
            
                ×
                Is this information correct?
                
                    
                    
                
            
         

        

                      
            

                
Ask Us A Question
                

                
                


                    

                        
                        
                            
                                First Name
                                    
                            
                        
                        
                        
                            
                                Last Name
                                    
                            
                        

                        
                        
                            
                                Email
                                    
                            
                        
                        


                        
                        
                            
                                Phone number
                                    
                            
                        
                        


                        
                        Select Question Category
                        
                            

                            

                    

                            
                            Enter your question:
                            
                                
                            
                            
    
                        
                        


                        
                            Please Fill in Entire Form
                            
                        
                    
                 
            
        
     

    
    

    






**BEGINNING OF MY JAVASCRIPT CODE**

//Checks if user has pressed update without entering fields
function validateForm(){

    if($('fN').innerHTML == ''){
        $('formError').style.display = 'block';
        return false;
            } else if ($('lN').innerHTML == ''){  
                $('formError').style.display = 'block';
                return false;
                    } else if ($('eMail').innerHTML == ''){
                        $('formError').style.display = 'block';
                        return false;
                            } else {
                                $("formError").hide();
                                return true;
                            }
}   



function validateFName(x){
    var re = /[a-zA-Z]$/;

    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        x.value = "Please Fill in First Name";
        return false;   
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "Please Use Only Letters";
                    return false;
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            return true;
                            }
                }
}

function validateLName(x){
    var re = /[a-zA-Z]$/;

    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        x.value = "Please Fill in Last Name";
        return false;   
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "Please Use Only Letters";
                    return false;
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            return true;
                            }
                }
}

function validateEmail(x){
    var re = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@(($$[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$$)|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        x.value = "Please Fill in Email";
        return false;   
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "You must enter a valid Email";
                    return false;
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            return true;
                            }
                }   
}


function validatePhoneNum(x) {
    var re = /^$?([0-9]{3})$?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;

    if(x.value == "") {
        x.style.background = '#e35152';
        x.style.color = 'white';
        x.value = "Please enter phone number xxx-xxx-xxxx";
        return false;
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "Please enter phone number xxx-xxx-xxxx";                 
                    return false;
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            return true;                            
                        }
    }
}

CertainPerformance · Accepted Answer

Use .value (not .innerHTML) to get the value of an input element. Also, to select by ID, you need to include '#' before the string. (Also, it's better to prefer strict equality over loose equality)

You can also clean up the code some by following DRY. Example:

function validateForm() {
  const inputIDs = ['fN', 'lN', 'eMail'];
  const formError = document.querySelector('#formError');
  if (inputIDs.some(inputID => document.getElementById(inputID).value.length === 0)) {
    formError.style.display = 'block';
    return false;
  } else {
    formError.style.display = 'none';
    return true;
  }
}

Javascript form validation onclick button no error yet not working either

Answers (1)

Related Questions