Javascript Validation error, can't submit the form

Question

I am doing this project in which I made a registration form in HTML and validated it 'simply' by javascript. By 'simply' I mean that I am just making sure that the input fields are not empty. Now, what's the issue? Everything is working fine until someone select 'others' option from college list (id=cname) and a new input box will appear (which has id=cname1). Now, if someone will leave the input box empty, it would return an alert saying 'College name cant be empty!', but then he is unable to click on the submit button. I double-checked the syntax and everything seems fine. Here is my javascript code:

            function validate(){
                var name=document.getElementById("name").value;
                if(name===""){
                      document.getElementById("ename").innerHTML="Please Enter a Name";
                      return false;
                }else{
                    var mail=document.getElementById("mail").value;
                    if(mail===""){
                      document.getElementById("email").innerHTML="Please Enter an Email";
                      return false;
                    }else{
                    var num=document.getElementById("num").value;
                    if(num===""){
                      document.getElementById("enum").innerHTML="Please Enter Phone number";
                      return false;
                    }else{
                       var batch=document.getElementById("batch").value;
                       if(batch===""){
                            document.getElementById("ebatch").innerHTML="Please Enter a Batch";
                            return false;
                        }
                        else{
                            var cname=document.getElementById("cname").value;
                            if(cname===""){
                            document.getElementById("ecname").innerHTML="Please Enter a College Name";
                            return false;
                            }else if(cname==="others"){
                                var cname1=document.getElementById("cname1").value;
                                if(cname1==="")
                                    alert("College Name can't be empty");
                                return false;
                            }else{
                                var activity=document.getElementById("activity").value;
                                if(activity===""){
                                document.getElementById("eactivity").innerHTML="Please Enter a Activity Name";
                                return false;
                                }else{
                                    return true;
                                 }
                            }
                        }
                    }
                }
            }
        }

Update 2: The shrink-ed HTML


            
                Name
                
                
            
            
                Email
                
                
            
            
                Phone
                
                
            
            
                Course
                
                    
                
            
            
            
                Batch
                
                    
                
                
            
            
                WorkShop
                
                    
                        
                
                    
                        
                
                 
                    
                
            
            
            
                College name
                
                    
                
                
	
                
            
            
            
                Accomodation

Thanks

jacobangel · Accepted Answer

The problem is you didn't wrap your if statement in braces.

The offending snippet:

var cname1=document.getElementById("cname1").value;
if(cname1==="")
   alert("College Name can't be empty");
return false;

This is the same as writing:

var cname1=document.getElementById("cname1").value;
if(cname1==="") {
   alert("College Name can't be empty");
}
return false;

Which means that you will always return false once you get to this value. This will always prevent the form submission provided the user gets this far.

The fix is straightforward:

var cname1=document.getElementById("cname1").value;
if(cname1==="") {
   alert("College Name can't be empty");
   return false;
}

For this reason, many consider it a best practice to always include braces when writing JavaScript.

Javascript Validation error, can't submit the form

Answers (1)

Related Questions

Javascript Validation error, can&#39;t submit the form

Answers (1)

Related Questions

Javascript Validation error, can't submit the form