Solved

Is my javascript syntax correct to validate my form submission?

Posted on 2013-05-31
7
400 Views
Last Modified: 2013-06-01
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

0
Comment
Question by:evibesmusic
  • 2
  • 2
  • 2
7 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39211987
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
 
LVL 58

Accepted Solution

by:
Gary earned 400 total points
ID: 39212082
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
 
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 100 total points
ID: 39212124
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:evibesmusic
ID: 39212159
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
 
LVL 58

Expert Comment

by:Gary
ID: 39212164
I give you the answer and get an assisted solution...?
0
 

Author Comment

by:evibesmusic
ID: 39212332
Honest mistake.

Admin....please reverse point values.

Thank you.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now