Javascript return in Chrome being ignored

I have a javascript field validator script that works fine in Internet Explorer, but in Chrome the returns get ignored and tries to submit.
You can see just before the page submits the field background colours changing so i know its getting that far.

Does Chrome not recognise Chrome to stop the function?
<script type='text/javascript'>   

function validateFields(action)   
{   

  var subject = document.getElementById('subject').value;   
  var description = document.getElementById('desc').value;   
  var category = document.getElementById('category').value;
  var filename = document.getElementById('file1').value;
  if (document.getElementById.cause)
  {
	var cause = document.getElementById('cause').value;
  }
    
  if(category.length == 0)
  {
		document.getElementById('category').style.borderColor = '#EE0000';
		document.getElementById('category').style.backgroundColor = '#EEEED1';
		  if(subject.length == 0)   
		  {   
			document.getElementById('subject').style.borderColor = '#EE0000';
			document.getElementById('subject').style.backgroundColor = '#EEEED1';
				if(description.length == 0)   
				{   
					document.getElementById('desc').style.borderColor = '#EE0000';
					document.getElementById('desc').style.backgroundColor = '#EEEED1';
					return ;   
				} 
				else
				{
				   return ; 
				}
		  } 
		return ; 
  }
  else if(subject.length == 0)   
		  {   
			document.getElementById('subject').style.borderColor = '#EE0000';
			document.getElementById('subject').style.backgroundColor = '#EEEED1';
			if(description.length == 0)   
			{   
			document.getElementById('desc').style.borderColor = '#EE0000';
			document.getElementById('desc').style.backgroundColor = '#EEEED1';
			return ; 
			} 
			else
			{
			return ; 
			}
		  }   
  
  else if(description.length == 0)   
		  {   
			document.getElementById('desc').style.borderColor = '#EE0000';
			document.getElementById('desc').style.backgroundColor = '#EEEED1';
			return ;   
		  } 
  
  else
  {
	if (filename.length > 0)
	{
		document.getElementById('upload').value = 1;
	}
	alert(action);
	if (action == 1)
	{
	
	document.getElementById('action').value = 1;
	document.form.submit();
	}
	if (action == 2)
	{
		
			if (document.getElementById('cause').value.length == 0)
			{
				document.getElementById('cause').style.borderColor = '#EE0000';
				document.getElementById('cause').style.backgroundColor = '#EEEED1';
				return ; 
			}
			else
			{
				document.getElementById('action').value = 2;
				document.form.submit();
			}
	}	
  }
}   
</script>  

Open in new window

LVL 1
AVONFRSAsked:
Who is Participating?
 
Tom BeckCommented:
Same concept, just move the function calls to the button clicks. Layout would look like this:

function validateFields(form, action) {
    if (..validating condition true..) {
         return false;  //DO NOT SUBMIT
    } else {
         if (action==1) {
              //DO THIS
              form.submit();
              return false;
         }
         if (action==2) {
              //DO THIS
              form.submit();
              return false;        
         }
}

<form action="#" id="form1">
   ...
   ...
   <button onclick="return validateFields(document.forms.form1, 1); return false;">Next</button>
   <button onclick="return validateFields(document.forms.form1, 2); return false;">Create & Close</button>  
</form>
0
 
Tom BeckCommented:
Instead of document.getElementById, access your form elements this way:

var subject = document.forms[0].subject.value;

Where form[0] is the first form on the page and contains the inputs.

Or,

var subject = document.forms.form1.subject.value;

Where form1 is the name of the form holding the inputs.
0
 
AVONFRSAuthor Commented:
It still tries to submit the page.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Tom BeckCommented:
Oh, sorry, I misunderstood the question. I got it now.

The return statement only stops the function from proceeding further. It does not prevent the form from submitting. This is not exclusive to Chrome. It's the same with all browsers. To prevent submission of the form when there are validation errors, you have to delegate the task of submitting the form to the validating function.

The attached snippet demonstrates this, but it also demonstrates a different logic to the validation process. With your logic of nested if statements, you are checking and rechecking the same fields repeatedly when the only condition you are checking is "is the field empty". Maybe I'm missing something here. The logic in this snippet will change the borders for all empty fields at one time in the first validation check and prevent the submission of the form unless all fields are filled in. For your purposes, it is NOT complete because it does not handle the file field or cause field as you have done. It's just a sample to demonstrate the required logic.

P.S. This statement, if (document.getElementById.cause), will never be true because it does not point to an object on the page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head> 
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<script type="text/javascript" language="javascript"> 
function validateFields(f)   
{ 
    if (f.subject.value == "" || f.desc.value == "" || f.category.value == "" || f.file1.value == "" || f.cause.value == "") {
        //one or more fields are empty
        if (f.subject.value == "") {
            f.subject.style.borderColor = '#EE0000';
            f.subject.style.backgroundColor = '#EEEED1';
        } 
        if (f.desc.value == "") {
            f.desc.style.borderColor = '#EE0000';
            f.desc.style.backgroundColor = '#EEEED1';
        } 
        if (f.category.value == "") {
            f.category.style.borderColor = '#EE0000';
            f.category.style.backgroundColor = '#EEEED1';
        } 
        if (f.file1.value == "") {
            f.file1.style.borderColor = '#EE0000';
            f.file1.style.backgroundColor = '#EEEED1';
        } 
        if (f.cause.value == "") {
            f.cause.style.borderColor = '#EE0000';
            f.cause.style.backgroundColor = '#EEEED1';
        }
        return false;  //change the border and background color for any empty fields and prevent submit
    } else {
        f.submit();    //submit when all fields are filled in
        return false;
    } 
}   
</script>
</head>
 
<body>
<form action="#" id="form1" onsubmit="return validateFields(this); return false;">
<div class="container">
<input type="text" id="subject" value="" />
<input type="text" id="desc" value="" />
<input type="text" id="category" value="" />
<input type="text" id="file1" value="" />
<input type="text" id="cause" value="" />
	<input type="submit" value="Submit" />
</div>
</form>	
</body>   
</html>

Open in new window

0
 
AVONFRSAuthor Commented:
OK, thats great thanks for that. But that form is relying on 1 submit button, i actually have 2.
<button onClick="validateFields(1)">Next</button>
<button onClick="validateFields(2)">Create & Close</button>

Open in new window


This is for a helpdesk system, and action 1 creates the helpdesk call and leaves it open, and action 2 creates the call and then closes it immediately.

How can i pass these as well?
0
 
AVONFRSAuthor Commented:
Thats brilliant. After a little bit tweaking got it going to how i need it.

Thanks
0
 
Tom BeckCommented:
Great! Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.