Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Validation not firing 2

Status
Not open for further replies.
JimJx

JimJx

Technical User
Feb 16, 2001
202
US
I have a form and am trying to get it to validate before submitting, but for some reason, I do not get anything, it just submits....

Any ideas?

Code: 
<script type="text/javascript">
<!--
function validateForm(form) { 
var $ErrNo=0;
var $form_object=document.forms.adminForm;
var $ErrStr = "";

if ($form_object.elements.LOname.value == -1 && 
	$form_object.elements.LOaction.value == -1 &&
	$form_object.elements.INup.value == -1 &&
	$form_object.elements.Inaction.value == -1 ) { 
        $ErrNo=1;
        $ErrStr = "You must make a selection\n"
   } 

   
if ($ErrNo != "0") {
alert ($ErrStr);
return false;
}
document.adminForm.submit();
}
// -->
</script>

The calling form is
Code: 
form name="adminForm" action="admin3.cgi" method="post"  onSubmit="return validateForm()">
<table border="0" cellpadding="4" cellspacing="2" align="center">

<tr>
<td valign="top"><b><font color="#552500">Loan Officers:</font></b></td>
<td valign="top" height="24">
<select name="LOname" size="1">
<option selected>Select</option>
<option value="LO1">LO1</option>
<option value="LO2">LO2</option>
</select>
</td>
<td valign="top" height="24">
<select name="LOaction" size="1">
 />

<option selected>Select</option>
<option value="Upload" label="Upload">Upload</option>
<option value="Delete" label="Delete">Delete</option>
<option value="Change Password" label="Change">Change Password</option>
</select>
<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td valign="top"><b><font color="#552500">Investors:</font></b></td>
<td valign="top" height="24">
<select name="INup" size="1">
<option selected>Select</option>

<option value="JRC1">JRC1</option>
<option value="JRC2">JRC2</option>
<option value="JRC3">JRC3</option>
</select>
</td>
<td valign="top" height="24"><select name="Inaction" size="1">
 />
<option selected>Select</option>
<option value="Upload" label="Upload">Upload</option>
<option value="Delete" label="Delete">Delete</option>

<option value="Change Password" label="Change">Change Password</option>
</select>
</td>
<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top" height="24"><input type="submit" name="submit" value="Submit" /></form></td>
<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>
</form>

Any insights greatly appreciated.
Jim
 
Sort by date Sort by votes
I take it that you're a PHP or Perl programmer. Try the code after you remove the dollar signs from in front of the variable names.

And why do you have an argument form in the function that you never use, and don't include as a parameter passed to the function?

Lee
 
Upvote 0 Downvote
You should have your validation routine return true or false, and then have your onsubmit handler return that result. As it is, you are already having your submit do the work by submitting the form, then again in your validation routine you have javascript submit the form again. I would make the following changes - also sticking to what Lee said about removing the $ from your variable names. Another thing Lee mentioned about the form reference in the function, you can have the validation routine pass "this" as a parameter to the function since it is being invoked by the form tag - that way you don't have to re-declare it in the function. Also, never use the name "submit" for your HTML elements, it causes problems in the event that you do want to submit a form using the javascript syntax window.formName.submit(). And one more thing, you're checking ErrNo for equality against the string "0", instead of the integer 0 which you initially set it up as, so you'll need to remove the quotes:
Code: 
<script type="text/javascript">
<!--
function validateForm([!]form_object[/!]) {
   var ErrNo=0;
   [s]//var $form_object=document.forms.adminForm;[/s]
   var ErrStr = "";

   if (form_object.elements.LOname.value == -1 && form_object.elements.LOaction.value == -1 && form_object.elements.INup.value == -1 && form_object.elements.Inaction.value == -1 ) {
      ErrNo=1;
      ErrStr = "You must make a selection\n"
   }

   if (ErrNo != 0) {
      alert (ErrStr);
      return false;
   }
   [!]return true;[/!]
   [s]//document.adminForm.submit();[/s]
}
// -->
</script>
.
.
.
<form name="adminForm" action="admin3.cgi" method="post"  onSubmit="return validateForm([!]this[/!])">
.
.
.
<input type="submit" name="[!]mySubmit[/!]" value="Submit" />

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
JimJx, one other thing to keep in mind.
If you have an error in your javascript code nothing will stop the form from submitting so the submission is going to happen as a result of clicking the Submit button.

Even after setting your function to return a value, if your function aborts due to errors the form will submit.


At my age I still learn something new every day, but I forget two others.
 
Upvote 0 Downvote
Hi all,

I must plead guilty to being a PERL programmer. I just didn't realize it was quite that obvious. :)

I made all of the suggested changes, and also added an alert right before the return true statement.

Even if nothing is selected in the drop downs, I get the alert that I placed before the return true that says No errors. So, obviously, I am not checking the valuies correctly.

Suggestions?
Jim
 
Upvote 0 Downvote
Kick out all your values to ensure that they are the values you think they are:

Code: 
[COLOR=red]alert(form_object.elements.LOname.value);
alert(form_object.elements.LOaction.value);
alert(form_object.elements.INup.value);
alert(form_object.elements.Inaction.value);[/color]
[gray][i]//put those alerts before this if statement to ensure you have the right values[/i][/gray]
   if (form_object.elements.LOname.value == -1 && form_object.elements.LOaction.value == -1 && form_object.elements.INup.value == -1 && form_object.elements.Inaction.value == -1 ) {

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
one problem could be you are ending your form tag twice:
Code: 
</form></td>
<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>
</form>
You don't need the first one.
 
Upvote 0 Downvote
i got it to work in this way:
Code: 
function validateForm(form_object) {
	var ErrStr = null;
	
	if (document.forms[form_object].elements['LOname'].value == "" || document.forms[form_object].elements['LOaction'].value == "" || document.forms[form_object].elements['INup'].value == "" || document.forms[form_object].elements['Inaction'].value == ""){
		ErrStr = "You must make a selection.";
	}
	
	if (null == ErrStr) {
		return true;
	} else {
		alert (ErrStr);
		return false;
	}
}

Code: 
<form name="adminForm" id="adminForm" action="admin3.cgi" method="post">
	<table border="0" cellpadding="4" cellspacing="2" align="center">
		<tr>
			<td valign="top"><b><font color="#552500">Loan Officers:</font></b></td>
			<td valign="top" height="24"><select name="LOname" id="LOname" size="1">
					<option selected="selected" value="">Select</option>
					<option value="LO1">LO1</option>
					<option value="LO2">LO2</option>
				</select>
			</td>
			<td valign="top" height="24"><select name="LOaction" id="LOaction" size="1">
					<option selected="selected" value="">Select</option>
					<option value="Upload" label="Upload">Upload</option>
					<option value="Delete" label="Delete">Delete</option>
					<option value="Change Password" label="Change">Change Password</option>
				</select>
			<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		</tr>
		<tr>
			<td valign="top"><b><font color="#552500">Investors:</font></b></td>
			<td valign="top" height="24"><select name="INup" id="INup" size="1">
					<option selected="selected" value="">Select</option>
					<option value="JRC1">JRC1</option>
					<option value="JRC2">JRC2</option>
					<option value="JRC3">JRC3</option>
				</select>
			</td>
			<td valign="top" height="24"><select name="Inaction" id="Inaction" size="1">
					<option selected="selected" value="">Select</option>
					<option value="Upload" label="Upload">Upload</option>
					<option value="Delete" label="Delete">Delete</option>
					<option value="Change Password" label="Change">Change Password</option>
				</select>
			</td>
			<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		</tr>
		<tr>
			<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
			<td valign="top" height="24"><input type="submit" name="mySubmit" value="Submit" onClick="return validateForm('adminForm');" /></td>
			<td valign="top" height="24">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		</tr>
	</table>
</form>
 
Upvote 0 Downvote
It was returning 'Select' as the value. I don't remember where I got it from, but I thought (I know, my first mistake:) ) that if nothing was selected, it returned a value of -1.

So, I just went in and added value="" to all of the selects and it works fine now. Thnks for all of the responses, it is greatly appreciated.

Jim
 
Upvote 0 Downvote
Ahh, you were checking to see if nothing was selected in a select box? If you want to check to see if nothing is selected then you would want to reference the .selectedIndex of that element, not the .value - if no elements are selected in a select box then the .selectedIndex will be -1. That's probably what you were thinking [smile]

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
This
Code: 
onClick="return validateForm('adminForm');"

needs to be in the <form> tag as

Code: 
onSubmit="return validateForm(this.name);"

By using this.name your code becomes more flexible and portable. If you change the form name it's automatically taken care of, and if you want to use the code in another form with a different name, it automatically handles the change.

Lee
 
Upvote 0 Downvote
i knew there was a better way. before the posts were saying use validateForm(this) but i never could get that to work.

Thanks for the tip.
 
Upvote 0 Downvote
You could just use this if you changed your JS function a bit:
Code: 
function validateForm(form_object) {
    var ErrStr = null;

    //used with just [b]this[/b] as the parameter:
    var el = form_object.elements;

    //using [b]this.name[/b]:
    //var el = document.forms[form_object].elements;
    
    if (el['LOname'].value == "" || el['LOaction'].value == "" || el['INup'].value == "" || el['Inaction'].value == ""){
        ErrStr = "You must make a selection.";
    }
    
    if (null == ErrStr) {
        return true;
    } else {
        alert (ErrStr);
        return false;
    }
}

I would at least assign the form elements to a variable inside the function as in the example above so your code can access the elements more directly than drilling from the top down each time.

You might also consider checking for the input value length rather than for "". I don't know if it still happens, but there used to be some browsers that would interpret the number zero as "".

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JPSeo
  • Locked
  • Question
--How to implement req.body.param validation
Replies
0
Views
73
JPSeo
JPSeo
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
243
waubain
waubain
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
132
waubain
waubain
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
115
ggriffit
ggriffit
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
91
HansMaulwurf
HansMaulwurf

Part and Inventory Search

Sponsor

Back
Top