Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validating forms using javascript

    Hi, im trying to validate a form using javascript.
    If there are errors in the form javascript lists them in a div tag
    on the top of the page. the problem is that whenever i click
    the submit for the first time everything is working but after
    i get the errors if im clicking submit again, it's submitting the form
    regardless of the errors...

    Attached is the code
    Thanks
    Code:
    window.onload = initForm;
    
    var valid = true;
    var errorlog = new Array();
    
    function initForm(){
    	document.forms[0].onsubmit = validateForm;
    }
    
    function validateForm(){
    	// validate first name
    	if (document.getElementById("firstname").value == ""){
    		errorlog[0] = true;
    	}
    	// validate last name
    	if (document.getElementById("lastname").value == ""){
    		errorlog[1] = true;
    	}
    	// validate phone number
    	if (document.getElementById("tel").value == "" || 
    	document.getElementById("tel").value.search(/^\d{10}$/) == -1 &&
    	document.getElementById("tel").value.search(/^\d{8}$/) ==-1 ){
    		
    		errorlog[2] = true;	
    	}
    	
    	notValid();
    	return valid;
    }
    
    function changeId(){
    	document.getElementById("tobechanged").id = "errorlog";	
    }
    
    function outputErrors(){
    	if (errorlog[0]){
    		document.getElementById("errorlog").innerHTML += "Please enter your first name." + "<br/>";
    	}
    	if (errorlog[1]){
    		document.getElementById("errorlog").innerHTML += "Please enter your last name." + "<br/>";
    	}
    	if (errorlog[2]){
    		document.getElementById("errorlog").innerHTML += "Please enter a valid phone number." + "<br/>";
    	}
    }
    
    function notValid(){
    	changeId();
    	outputErrors();
    	valid = false;
    }

  • #2
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Quote Originally Posted by RisTar View Post
    Hi, im trying to validate a form using javascript.
    If there are errors in the form javascript lists them in a div tag
    on the top of the page. the problem is that whenever i click
    the submit for the first time everything is working but after
    i get the errors if im clicking submit again, it's submitting the form
    regardless of the errors...
    You have a global object named errorlog and then you change an element's ID to the same name, which is likely to cause a conflict.
    Why do you feel the need to change the ID of a div?

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    In Internet Explorer, names and IDs are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or ID.

    Validation of the kind if (document.getElementById("firstname").value == ""){ is barely worthy of the name, and virtually worthless, as even a single space or a ? will return false, i.e. pass the validation.
    Last edited by Philip M; 07-28-2009 at 08:34 AM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by 12 Pack Mack View Post
    Code:
    		if (nForm['firstName'].value == "")
    			{
    			 updateErrorLog(logMsgs[0],msgDisplay);			
    			}
    		if (nForm['lastName'].value == "")
    			{
    			 updateErrorLog(logMsgs[1],msgDisplay);			
    			}
    12 Pack Mack -

    One more time - Validation of the kind if (document.getElementById("firstname").value == ""){ or if (nForm['firstName'].value == "") { is barely worthy of the name, and virtually worthless, as even a single space or a ? will return false, i.e. pass the validation.

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your posts guys but it's still not working
    I changed the id name and i still get the same problem.
    when i submit for the first time it's working
    but when i hit submit again it's processing the form even if there are more errors.
    I also added a few more lines of code.

    Philip M - the form is not final and i will make the validation a bit more useful in the future
    but for now i just want to solve this bug.

    Thanks

    Code:
    window.onload = initForm;
    
    var valid = true;
    var errorlog = new Array();
    var checked = false;
    
    function initForm(){
    	document.forms[0].onclick = validateForm;
    }
    
    function validateForm(){
    	// validate first name
    	if (document.getElementById("firstname").value == ""){
    		errorlog[0] = true;
    	}
    	// validate last name
    	if (document.getElementById("lastname").value == ""){
    		errorlog[1] = true;
    	}
    	
    	
    	// validate phone number
    	if (document.getElementById("tel").value == "" || 
    	document.getElementById("tel").value.search(/^\d{10}$/) == -1 &&
    	document.getElementById("tel").value.search(/^\d{8}$/) ==-1 ){
    		
    		errorlog[2] = true;	
    	}
    	// validate email
    	if (document.getElementById("email").value == "" ||
    	document.getElementById("email").value.search(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) ==-1){
    		errorlog[3] = true;
    	}
    	// validate services
    	for (var i=0;i<7;i++){
    		if (document.getElementById("service" + i).checked){
    			checked = true;	
    		}
    	}
    	
    	if (!checked){
    		errorlog[4] = true;	
    	}
    	
    	// not valid will run only if there were errors in the array !!
    	var checker;
    	for (var j=0;j<5;j++){
    		if (errorlog[j]){
    			checker = true;	
    		}
    	}
    	if (checker == true){
    		notValid();	
    	} else {
    		valid = true;
    	}
    	return valid;
    }
    
    // function change id changes the id of the div tag that will display the errors
    function changeId(){
    	document.getElementById("tobechanged").id = "errorlogbox";	
    }
    
    // output errors prints all the errors that has been found into the newley defined errorlog div tag
    function outputErrors(){
    	if (errorlog[0]){
    		document.getElementById("errorlogbox").innerHTML += "Please enter your first name." + "<br/>";
    	}
    	if (errorlog[1]){
    		document.getElementById("errorlogbox").innerHTML += "Please enter your last name." + "<br/>";
    	}
    	if (errorlog[2]){
    		document.getElementById("errorlogbox").innerHTML += "Please enter a valid phone number." + "<br/>";
    	}
    	if (errorlog[3]){
    		document.getElementById("errorlogbox").innerHTML += "Please enter a valid email address." + "<br/>";
    	}
    	if (errorlog[4]){
    		document.getElementById("errorlogbox").innerHTML += "Please select one service or product from the list below." + "<br/>";
    	}
    }
    
    
    function notValid(){
    	changeId();
    	outputErrors();
    	window.scroll(0,0);
    	valid = false;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •