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!
-
Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Required Field Validations 2
- Thread starter rmz8
- Start date
-
1
- #2
You can always do
<form name="form" action="">
<input type="text" name="user">
<br>
<input type="text" name="pass">
<input type="submit" name="B1" onclick="
if (!document.form.user.value || !document.form.pass.value){
alert('Fill In All The Fields');
return false;
}
">
</form>
But I'd actually like to know a better way to do it, if no one else posts I guess you could use that hehe.
Tony
- Thread starter
- #3
- Thread starter
- #4
Instead of onclick?
Hmm, There's always onsubmit and you could move the javascript into a function call in the head, but I can't remember if return false; will kill the submission if it finds empty fields.
I'll check it out in front page ...
Alrighty, that was quick ehh, ok, so what you could do is this,
<form name="form" method="POST" action="" onsubmit="
if (!document.form.user.value || !document.form.pass.value){
alert('Fill In All The Fields');
return false;
}
">
<p><input type="text" name="user" size="20"></p>
<p><input type="text" name="pass" size="20"></p>
<p><input type="submit" value="Submit" name="B1"></p>
</form>
Just don't try moving the javascript into a function the way it is, because as is is wouldn't kill the submission when needed using return false;
Ok, hope that'll work.
Tony
Hmm, There's always onsubmit and you could move the javascript into a function call in the head, but I can't remember if return false; will kill the submission if it finds empty fields.
I'll check it out in front page ...
Alrighty, that was quick ehh, ok, so what you could do is this,
<form name="form" method="POST" action="" onsubmit="
if (!document.form.user.value || !document.form.pass.value){
alert('Fill In All The Fields');
return false;
}
">
<p><input type="text" name="user" size="20"></p>
<p><input type="text" name="pass" size="20"></p>
<p><input type="submit" value="Submit" name="B1"></p>
</form>
Just don't try moving the javascript into a function the way it is, because as is is wouldn't kill the submission when needed using return false;
Ok, hope that'll work.
Tony
-
1
- #6
to precise : the actual correct call to a validation fonction is the onsubmit one : <form .... onsubmit="return validation_function()">
if you use onclick in the submit button you might get unexpected results (such as : submitting the form even if the validation function returned false)
also, don't forget to return a value from the validation function - and to expect one in the onsubmit call (was the : RETURN ... part)
if you use onclick in the submit button you might get unexpected results (such as : submitting the form even if the validation function returned false)
also, don't forget to return a value from the validation function - and to expect one in the onsubmit call (was the : RETURN ... part)
- Thread starter
- #7
I didn't want to use this method because I wanted to place the code within the head. What I have is a a dynamic page that generates a specified number of upload boxes based on a number that the user enters. I have to have each upload box filled in (i.e. Browsed so that a file path is in it). I need to use a ColdFusion loop within whatever JavaScript that I use to generate the validation. That is what I'm asking how to do; how can I create a function incorporating my ColdFusion loop and then call to it using OnClick. I already have a function validating something else that is being called with OnClick, and I didn't know if you could call two functions with OnClick, so that's why I wanted to use another method. Here is the complete code for the page:
=====================================================
=====================================================
Ryan ;-]
=====================================================
Code:
<CFOUTPUT>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!--Check for password in URL -->
<CFIF IsDefined("Session.PWord") AND IsDefined("Session.UN")>
<!--Authorization check -->
<CFIF IsDefined("Session.Auth") is NOT TRUE>
<CFLOCATION URL="logout.cfm">
<CFELSE>
<!--Run query to get user information -->
<CFQUERY datasource="#DSN#" name="getUser">
SELECT RealName FROM Users WHERE (UserName = '#Session.UN#' AND Password = '#Session.PWord#')
</CFQUERY>
<CFIF getuser.recordcount EQ "0">
<CFLOCATION url="logout.cfm">
<CFELSE>
<!--Checks if URL primary key value is present -->
<CFIF IsDefined("URL.ID")>
<CFSET NewRecord = "No">
<CFELSE>
<CFSET NewRecord = "Yes">
</CFIF>
<!--Sets variables for primary key not being present -->
<CFIF NewRecord>
<CFSET PageTitle = "Add Resource">
<CFSET Teacher = Trim(Session.Teacher)>
<CFSET Resource_Title = "">
<CFSET Resource_Type = "--SELECT AN OPTION--">
<CFSET Subject_Area = "--SELECT AN OPTION--">
<CFSET Grade_Level = "--SELECT AN OPTION--">
<CFSET Resource_Description = "">
<CFELSE>
<!--Queries database and sets variables for primary being present -->
<CFQUERY datasource="#DSN#" name="getResource">
SELECT * FROM Resources WHERE ID = #URL.ID#
</CFQUERY>
<CFSET PageTitle = "Update Resource">
<CFSET Teacher = Trim(Session.Teacher)>
<CFSET Resource_Title = "#Trim(getResource.Resource_Title)#">
<CFSET Resource_Type = "#Trim(getResource.Resource_Type)#">
<CFSET Subject_Area = "#Trim(getResource.Subject_Area)#">
<CFSET Grade_Level = "#Trim(getResource.Grade_Level)#">
<CFSET Resource_Description = "#Trim(getResource.Resource_Description)#">
</CFIF>
<TITLE>ZEAL network's GATSBY: #PageTitle#</TITLE>
<SCRIPT language="JavaScript">
<!--
function func(obj, num, othobj)
{
str = new String(obj.value);
othobj.value = new Number(str.length+1);
dnum = num -1;
if(str.length >= dnum)
{
alert('You can only have '+num+' characters in this field.');
obj.onfocus = obj.blur;
}
}
function checkSelects(form) {
select1 = form.Resource_Type
select2 = form.Subject_Area
select3 = form.Grade_Level
if(select1.value=='xyz') {
alert('Please select a valid option.')
return false;
}
if(select2.value=='xyz') {
alert('Please select a valid option.')
return false;
}
if(select3.value=='xyz') {
alert('Please select a valid option.')
return false;
}
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="##FFFFFF"><cfinclude template="../includes/header.html">
<H2><FONT FACE="Arial, Helvetica, sans-serif"><U>#PageTitle#</U> <B><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"></FONT></B><U><B><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">[<A HREF="index.cfm">Go
back</A>] </FONT></B></U></FONT></H2>
<CFFORM action="add_update.cfm" method="post" name="frm" enctype="multipart/form-data">
<INPUT type="hidden" name="Teacher" value="#Session.Teacher#">
<CFIF newrecord EQ "No">
<INPUT type="hidden" name="ID" value="#URL.ID#"></CFIF>
<TABLE BORDER="0">
<TR>
<TD HEIGHT="7" VALIGN="TOP" COLSPAN="2"><I><B><FONT SIZE="2" FACE="Arial, Helvetica, sans-serif"></FONT></B></I><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><B>Resource
Title:</B></FONT></TD>
<TD HEIGHT="7" WIDTH="84%"> <FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<CFINPUT TYPE="TEXT" NAME="Resource_Title" VALUE="#Resource_Title#" SIZE="10" REQUIRED="yes" MESSAGE="Please enter a title for your resource.">
</FONT></TD>
</TR>
<TR>
<TD HEIGHT="2" VALIGN="TOP" COLSPAN="2"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><B>Resource
Type:</B></FONT><BR>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">If you are uploading
a web page with images and other files make sure the type selected is
HTML.</FONT></TD>
<TD HEIGHT="2" WIDTH="84%">
<SELECT NAME="Resource_Type">
<CFIF newrecord><OPTION VALUE="xyz" SELECTED>#Resource_Type#</OPTION><CFELSE><OPTION VALUE="#Resource_Type#" SELECTED>#Resource_Type#</OPTION></CFIF>
<OPTION VALUE="xyz">+-+-+-+-+-+-+-+</OPTION>
<OPTION VALUE="Adobe PDF">Adobe PDF</OPTION>
<OPTION VALUE="GIF">GIF</OPTION>
<OPTION VALUE="HTML">HTML</OPTION>
<OPTION VALUE="JPEG">JPEG</OPTION>
<OPTION VALUE="Microsoft Access">Microsoft Access</OPTION>
<OPTION VALUE="Microsoft Excel">Microsoft Excel</OPTION>
<OPTION VALUE="Microsoft PowerPoint">Microsoft PowerPoint</OPTION>
<OPTION VALUE="Microsoft Word">Microsoft Word</OPTION>
<OPTION VALUE="Plain Text">Plain Text</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD HEIGHT="2" VALIGN="TOP" COLSPAN="2"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><B>Subject
Area:</B></FONT></TD>
<TD HEIGHT="2" WIDTH="84%">
<SELECT NAME="Subject_Area">
<CFIF newrecord><OPTION VALUE="xyz" SELECTED>#Subject_Area#</OPTION><CFELSE><OPTION VALUE="#Subject_Area#" SELECTED>#Subject_Area#</OPTION></CFIF>
<OPTION VALUE="xyz">+-+-+-+-+-+-+-+</OPTION>
<OPTION VALUE="Computers">Computers</OPTION>
<OPTION VALUE="Guidance">Guidance</OPTION>
<OPTION VALUE="English">English</OPTION>
<OPTION VALUE="Family & Consumer Sciences">Family & Consumer Sciences</OPTION>
<OPTION VALUE="Fine Arts
">Fine Arts</OPTION>
<OPTION VALUE="Foreign Language">Foreign Language</OPTION>
<OPTION VALUE="Mathematics">Mathematics</OPTION>
<OPTION VALUE="Music">Music</OPTION>
<OPTION VALUE="Physical Education">Physical Education</OPTION>
<OPTION VALUE="Science">Science</OPTION>
<OPTION VALUE="Social Studies">Social Studies</OPTION>
<OPTION VALUE="Special Educaton">Special Educaton</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD HEIGHT="2" VALIGN="TOP" COLSPAN="2"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><B>Grade
Level:</B></FONT></TD>
<TD HEIGHT="2" WIDTH="84%">
<SELECT NAME="Grade_Level">
<CFIF newrecord>
<OPTION VALUE="xyz" SELECTED>#Grade_Level#</OPTION><CFELSE><CFIF grade_level LT "4"><CFIF grade_level EQ "1"><OPTION VALUE="#Grade_Level#" SELECTED>#Grade_Level#st Grade</OPTION></CFIF><CFIF grade_level EQ "2"><OPTION VALUE="#Grade_Level#" SELECTED>#Grade_Level#nd Grade</OPTION></CFIF><CFIF grade_level EQ "3"><OPTION VALUE="#Grade_Level#" SELECTED>#Grade_Level#rd Grade</OPTION></CFIF><CFELSE>
<OPTION VALUE="#Grade_Level#" SELECTED>#Grade_Level#th Grade</OPTION></CFIF></CFIF>
<OPTION VALUE="xyz">+-+-+-+-+-+-+-+</OPTION>
<OPTION VALUE="1">1st Grade</OPTION>
<OPTION VALUE="2">2nd Grade</OPTION>
<OPTION VALUE="3">3rd Grade</OPTION>
<OPTION VALUE="4">4th Grade</OPTION>
<OPTION VALUE="5">5th Grade</OPTION>
<OPTION VALUE="6">6th Grade</OPTION>
<OPTION VALUE="7">7th Grade</OPTION>
<OPTION VALUE="8">8th Grade</OPTION>
<OPTION VALUE="9">9th Grade</OPTION>
<OPTION VALUE="10">10th Grade</OPTION>
<OPTION VALUE="11">11th Grade</OPTION>
<OPTION VALUE="12">12th Grade</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD HEIGHT="2" VALIGN="TOP" COLSPAN="2">
<P><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><B>Resource Description:<BR>
</B> <FONT SIZE="1">500 Chararacters Maximum</FONT></FONT></P>
<P>
<INPUT TYPE="text" name="textbox" id="textbox" SIZE="3">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">Characters</FONT></P>
</TD>
<TD HEIGHT="2" WIDTH="84%">
<TEXTAREA NAME="Resource_Description" COLS="70" ROWS="8" onkeypress="func(this, 500, document.frm.textbox)">#Resource_Description#</TEXTAREA>
</TD>
</TR>
<CFIF newrecord>
<TR>
<TD HEIGHT="2" WIDTH="16%" VALIGN="TOP" COLSPAN="2"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><B>Files:
</B></FONT><BR>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">You can upload up
to #form.fileuploads# file(s). If you are uploading a web page make
sure that the HTML file is the last file in the upload list.</FONT></TD>
<TD HEIGHT="2" WIDTH="84%">
<input type="hidden" name="numberInputs" value="#form.fileuploads#">
<cfloop index="x" from="1" to=#form.fileuploads#>
<p><INPUT TYPE="file" NAME="upFile#x#"></p>
</cfloop>
</TD>
</TR></CFIF>
<TR>
<TD HEIGHT="2" COLSPAN="3"> <FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<INPUT TYPE="submit" VALUE="Submit" onClick="return checkSelects(this.form);">
<INPUT TYPE="RESET" NAME="Reset" VALUE="Reset">
</FONT></TD>
</TR>
</TABLE>
</CFFORM><cfinclude template="../includes/footer.html"></CFIF></cfif>
<CFELSE>
<CFLOCATION URL="logout.cfm">
</CFIF>
</BODY>
</HTML>
</CFOUTPUT>=====================================================
Ryan ;-]
"<form .... onsubmit="return validation_function()">" and "I didn't want to use this method because I wanted to place the code within the head." -> this method calls a validation function that you can place in the head !!!!! so ????
also, about the cf loop, it is feasible INSIDE the javascript (as js is CLIENT side)
something like
function validation_function() {
<cfloop query=....>
if (#cfeval(select#i#.value=='xyz'))
{
alert('Please select a valid option.')
return false;
}
</cfloop>
}
and no, i didn't read your code, why did you cut/paste the whole page ???? why didn't you keeep only the relevant parts, so that people don't get afraid and read at least a part of your code ?
also, about the cf loop, it is feasible INSIDE the javascript (as js is CLIENT side)
something like
function validation_function() {
<cfloop query=....>
if (#cfeval(select#i#.value=='xyz'))
{
alert('Please select a valid option.')
return false;
}
</cfloop>
}
and no, i didn't read your code, why did you cut/paste the whole page ???? why didn't you keeep only the relevant parts, so that people don't get afraid and read at least a part of your code ?
- Thread starter
- #9
Iza, unfortunately my efforts to create the function did not succeed.
I tried this:
=====================================================
=====================================================
However, when I try to call to it with this (within the FORM tag):
=====================================================
=====================================================
I get a JavaScript error. The error might be because I am using ColdFusion JavaScript form validation, which generates JavaScript for an OnSubmit validation. Excuse my density when it comes to JavaScript, but I'm just not well versed in it.
Ryan ;-]
I tried this:
=====================================================
Code:
function validation_function
if (!document.form.Resource_Description.value){
alert('Please enter a description for your resource.');
return false;
}
<cfloop index="x" from="1" to=#form.fileuploads#>
if (!document.form.upfile#x#.value){
alert('Please select files to upload for your resource.');
return false;
}
</cfloop>However, when I try to call to it with this (within the FORM tag):
=====================================================
Code:
onsubmit="return validation_function()"I get a JavaScript error. The error might be because I am using ColdFusion JavaScript form validation, which generates JavaScript for an OnSubmit validation. Excuse my density when it comes to JavaScript, but I'm just not well versed in it.
Ryan ;-]
- Thread starter
- #10
I finally got the code and the function to work (Thanks Iza and Slueth). However, there is one problem. I don't think that JavaScript recognizes the value portion of a file upload field:
if (!document.frm.upfile1.value){
alert('Please select files to upload for your resource.');
return false;
}
The first part of the validation function works fine (validating that the textarea is not empty), but this gets skipped over after giving the message that it is "null or not an object." The name of the form is "frm" and I have the textarea being validated in a similar manner and it works.
Ryan ;-]
if (!document.frm.upfile1.value){
alert('Please select files to upload for your resource.');
return false;
}
The first part of the validation function works fine (validating that the textarea is not empty), but this gets skipped over after giving the message that it is "null or not an object." The name of the form is "frm" and I have the textarea being validated in a similar manner and it works.
Ryan ;-]
- Thread starter
- #11
- how did you fix the uploaded file problem ?? was it a multipart/form-data missing somewhere ?- Thread starter
- #13
Hey iza,
The case of the file field was wrong. Link9 told me to change it and it worked! Now, however, we are both baffled by the following code, which just will not work in Netscape 4.7 and 6 (we've worked on it for hours and it is just overridden in Netscape and provides no errors, but in Internet Explorer it works perfectly). The name of the form is frm:
Ryan ;-]
The case of the file field was wrong. Link9 told me to change it and it worked! Now, however, we are both baffled by the following code, which just will not work in Netscape 4.7 and 6 (we've worked on it for hours and it is just overridden in Netscape and provides no errors, but in Internet Explorer it works perfectly). The name of the form is frm:
Code:
if(document.frm.Resource_Type.value=='xyz') {
alert('Please select a resource type.')
return false;
}
if(document.frm.Subject_Area.value=='xyz') {
alert('Please select a subject area for your resource.')
return false;
}
if(document.frm.Grade_Level.value=='xyz') {
alert('Please select a grade level for your resource.')
return false;
}Ryan ;-]
- Thread starter
- #15
- Thread starter
- #16
sorry, once again i was "underwater" - i mean, almost sinking under work ;-)
if there is no error at all ... it'll be tough to debug !!!
i suggest (in ns) you alert all the values and maybe this will help (i would have done this for you but hey, i'm going to go to bed ;-))
alert(document.frm)
alert(document.frm.Resource_Type)
alert(document.frm.Resource_Type.value)
alert(document.frm.Resource_Type.value=='xyz')
-> if the error is in the way to refer to the elements, you'll spot it this way
-> if it's not, try your validation function for a very very very simple case : for example let only one textbox in the form, and then (in the function) test if this textbox.value=="xyz". If it does work, then it's not the validation function nor the way to call it
-> finally, i've just noticed (sorry sorry sorry) that you're trying to read values for selectboxes ?? if this is right to write formname.elementname.value for a textbox, the correct way to retrieve the value for a select is : formname.elementname.options[formname.elementname.selectedIndex].value
-> i'll try to check this forum on wenesday, let me know !
if there is no error at all ... it'll be tough to debug !!!
i suggest (in ns) you alert all the values and maybe this will help (i would have done this for you but hey, i'm going to go to bed ;-))
alert(document.frm)
alert(document.frm.Resource_Type)
alert(document.frm.Resource_Type.value)
alert(document.frm.Resource_Type.value=='xyz')
-> if the error is in the way to refer to the elements, you'll spot it this way
-> if it's not, try your validation function for a very very very simple case : for example let only one textbox in the form, and then (in the function) test if this textbox.value=="xyz". If it does work, then it's not the validation function nor the way to call it
-> finally, i've just noticed (sorry sorry sorry) that you're trying to read values for selectboxes ?? if this is right to write formname.elementname.value for a textbox, the correct way to retrieve the value for a select is : formname.elementname.options[formname.elementname.selectedIndex].value
-> i'll try to check this forum on wenesday, let me know !
- Thread starter
- #18
- Status
Similar threads
