Solved

Is my javascript syntax correct to validate my form submission?

Posted on 2013-05-31
7
402 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Shopping Cart 2 64
Select only the top record in a left join 13 34
Wordpress plugins not working in html 3 19
Select case on click 3 13
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

815 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

11 Experts available now in Live!

Get 1:1 Help Now