Is my javascript syntax correct to validate my form submission?

Experts,

I am simply trying to validate multiple fields at the same time. If the validation does not pass, I simply want to throw an alert.

I am not getting the desired alert when either the 'file_title' or 'url_title' are blank and the 'file' and 'url' fields are not (respectively).

Can someone earn some easy point and help me figure out what's incorrect here?

Cheers!

Here is my javascript:

<script>
function validateForm(){
	
	var x=document.forms["step8"]["file_title"].value;
	var y=document.forms["step8"]["file"].value;
	
	var a=document.forms["step8"]["url_title"].value;
	var b=document.forms["step8"]["url"].value;	
	
	if ((x==null || x=="") && (y!=null || y!="")){
	  alert("If you are going to upload a Supporting File, you must specify a Supporting File Title.");
	  return false;
	}
	elseif ((a==null || a=="") && (b!=null || b!="")){
	  alert("If you are going to enter a Supporting URL, you must specify a Supporting URL Title.");
	  return false;
	}
	
}		
</script>

Open in new window


Here is my form code:

<form action="?step=8_process" method="post" enctype="multipart/form-data" target="_self" name="step8" id="step8" onsubmit="return validateForm();">
<table width="100%" cellpadding="2" cellspacing="2">
<tr>
<td style="vertical-align:top;"><b>Supporting File Title:</b></td>
<td width="70%"><input name="file_title" id="file_title" type="text" /></td>
</tr>
<tr>
<td style="vertical-align:top;"><b>Process Map File:</b></td>
<td width="70%"><input name="file" type="file" /></td>
</tr>
<tr>
<td style="vertical-align:top;"><b>Process Map File Title:</b></td>
<td width="70%"><input name="url_title" id="url_title" type="text" /></td>
</tr>
<tr>
<td style="vertical-align:top;"><b>Process Map File:</b></td>
<td width="70%"><input name="url" id="url" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input class="save_button" type="image" title="save" value="submit" src="../images/save.png">
</td>
</tr>
</table>
</form>

Open in new window

evibesmusicAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
elseif
should be
else if

As alluded to above you do not need to check if null if the element exists but if the element doesn't exist your code would burp out anyway.
0
 
Robert SchuttSoftware EngineerCommented:
I rarely post untested code but you have described the conditions very clearly and that is not what the code does. I think the second || in both your if expressions need to be replaced by && like this:
<script>
function validateForm(){
	
	var x=document.forms["step8"]["file_title"].value;
	var y=document.forms["step8"]["file"].value;
	
	var a=document.forms["step8"]["url_title"].value;
	var b=document.forms["step8"]["url"].value;	
	
	if ((x==null || x=="") && (y!=null && y!="")){
	  alert("If you are going to upload a Supporting File, you must specify a Supporting File Title.");
	  return false;
	}
	elseif ((a==null || a=="") && (b!=null && b!="")){
	  alert("If you are going to enter a Supporting URL, you must specify a Supporting URL Title.");
	  return false;
	}
	
}		
</script>

Open in new window

Alternatively and maybe more intuitively try it this way:
<script>
function validateForm(){
	
	var x=document.forms["step8"]["file_title"].value;
	var y=document.forms["step8"]["file"].value;
	
	var a=document.forms["step8"]["url_title"].value;
	var b=document.forms["step8"]["url"].value;	
	
	if ((x==null || x=="") && !(y==null || y=="")){
	  alert("If you are going to upload a Supporting File, you must specify a Supporting File Title.");
	  return false;
	}
	elseif ((a==null || a=="") && !(b==null || b=="")){
	  alert("If you are going to enter a Supporting URL, you must specify a Supporting URL Title.");
	  return false;
	}
	
}		
</script>

Open in new window

This is boolean logic; you have defined the condition of a field not filled in as: (null or empty), then a field filled in is defined by: NOT(null OR empty), which is the same as ((NOT null) AND (NOT empty)). Note the reversal of AND/OR when factoring in the NOT from outside the parentheses.

Another way to look at it is that the test that you did (y!=null || y!="") is always true because y cannot be null and empty at the same time.

By the way, the reason I used the terms "you have defined" above is that I'm not sure you even need to check for null, as normally all 4 variables will be defined as string values if the form elements exist, but maybe I'm overlooking a particular situation that you ran into.
0
 
Robert SchuttConnect With a Mentor Software EngineerCommented:
Good catch GaryC! That would probably mean that as it is, the syntax error causes the function to not be called at all and that's why the form gets posted each time. For other types of errors a try/catch could be added. And a general tip: during development you could end your function with:
     alert('ok!'); return false;
so that you can see when the validation works but make it easier to test different situations quickly.

Here's a variant with that error corrected and without null checks that I expect to be sufficient:
<script>
function validateForm(){
	
	var x=document.forms["step8"]["file_title"].value;
	var y=document.forms["step8"]["file"].value;
	
	var a=document.forms["step8"]["url_title"].value;
	var b=document.forms["step8"]["url"].value;	
	
	if (x=="" && y!=""){
	  alert("If you are going to upload a Supporting File, you must specify a Supporting File Title.");
	  return false;
	}
	else if (a=="" && b!=""){
	  alert("If you are going to enter a Supporting URL, you must specify a Supporting URL Title.");
	  return false;
	}
	
}		
</script>

Open in new window

0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
evibesmusicAuthor Commented:
Thank you very much Experts.

The solution now works and I learned something in the process.

Sorry for the 'elseif' mistake...I am used to PHP which uses 'elseif' vs. 'else if'.

Cheers!
0
 
GaryCommented:
I give you the answer and get an assisted solution...?
0
 
evibesmusicAuthor Commented:
Honest mistake.

Admin....please reverse point values.

Thank you.
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.