Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Is my javascript syntax correct to validate my form submission?

Posted on 2013-05-31
7
Medium Priority
?
411 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
6 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 1600 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 400 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

577 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