Solved

Is my javascript syntax correct to validate my form submission?

Posted on 2013-05-31
7
401 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…

932 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

12 Experts available now in Live!

Get 1:1 Help Now