Help! Form validation not working using Javascript and Coldfusion 3

radiance · Jan 5, 2004

I am adding form validation to code programmed by someone else. The pages are eventually going to Paypal and use the ipn. The pages are Coldfusion, but for some reason, when I added the <cfform> to the pages, and tried to do the validation through coldfusion, I received nothing but errors. So, I tried javascript, and the form is still not returning errors when I enter invalid information or no information. Can someone tell me what I am doing wrong? Should I be changing something on the confirm page?

This is the URL:

http://www.bnaibrith.org/donations_forms/fund/annual_give/zdonate.cfm

Here is the main page for the form and it is passed to a confirm page in which all of the session variables are captured:
__________________________________________________

<cfif IsDefined("SESSION.Auth.IsLoggedIn&quot

is "true">
<cfset #loggedIn# = "yes">
<cfelse>
<cfset #loggedIn# = "no">
</cfif>

<cfif IsDefined("FORM.mode&quot

is "true">
<cfset #mode# = "edit">
<cfelse>
<cfset #mode# = "">
</cfif>

<cfset bnaibrith="Donate!">
<cfset chhead =3>
<cfset tier =4>
<cfset tierb =4>
<cfset side =5.2>
<cfset keywordspage="israel, world jewry">
<cfoutput><cfinclude template="#request.header#"></cfoutput>

<script language="JavaScript">
/// Check for valid email address: look for @ and .
function isEmail(elm) {
if (elm.value.indexOf("@&quot

!= "-1" &&
elm.value.indexOf(".&quot

!= "-1&quot

{
return true;
}
else {
return false;
}
}

// Check for blank fields
function isFilled(elm) {
if (elm.value == "" || elm.value == null) {
return false;
}
else {
return true;
}
}
// Check entire form
function isReady(form) {
if (isEmail(form.email) == false) { // A real email address?
alert("Please enter a valid email address.&quot

;
form.email.focus();
return false;
}

if (isFilled(form.fullname) == false) { // first name
alert("Please enter your first name.&quot

;
form.fname.focus();
return false;
}

if (isFilled(form.fullname) == false) { // last name
alert("Please enter your last name.&quot

;
form.lname.focus();
return false;
}

if (isFilled(form.city) == false) { // city?
alert("Please enter your city.&quot

;
form.city.focus();
return false;
}

if (isFilled(form.state) == false) { // state
alert("Please select your state.&quot

;
form.state.focus();
return false;
}

if (isFilled(form.hphone) == false) { // home phone
alert("Please eneter your home phone.&quot

;
form.hphone.focus();
return false;
}

if (isFilled(form.wphone) == false) { // work phone
alert("Please select your work phone.&quot

;
form.wphone.focus();
return false;
}
return true;
}
</script>

<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3">
<table cellpadding="2" cellspacing="2" border="0"><tr><td><cfoutput><img src="#request.picture#sm_klutznick_jewishlife.jpg" border="1" bordercolor="BLACK"></cfoutput></td><td class="heading4">Donate Now!</td>
</tr></table>
<br><br>

</td>
</tr>
</table>
<cfoutput>
<cfif #mode# is "edit">
<p>Please make any changes in the form below. Thank you!</p>
<table border="0" bgcolor="f5f5f5" cellpadding="2" cellspacing="2">
<form action="confirm.cfm" method="post" onSubmit = "return isReady(this);">
<tr>
<td class="boldtext">Member Id:<br/>(if known)</td>
<td class="text"><input type="text" name="txtMemberId" size = "10" value="#SESSION.MemberId#"></td>
</tr>
<tr>
<td class="boldtext">First Name:</td><td class="text"><input type="text" name="txtFName" value="#SESSION.fname#"></td>

<td class="boldtext">Last Name:</td><td class="text"><input type="text" name="txtLName" value="#SESSION.lname#" onBlur="doesExist(this.value, 'last name')"></td>
<td class="text">MI:</td><td><input type="text" name="txtMI" size="2" value="#SESSION.mi#"></td>
</tr>
<tr>
<td class="boldtext">Address:</td><td class="text"><input type="text" name="txtAdd1" value="#SESSION.stno#"></td>
</tr>
<tr>
<td class="boldtext">Address 2:</td><td class="text"><input type="text" name="txtAdd2" value="#SESSION.stno2#"></td>
</tr>
<tr>
<td class="boldtext">City:</td><td class="text"><input type="text" name="txtCity" value="#SESSION.city#"></td>

<td class="boldtext">State:</td>
<td class="text"><select name="txtState">
<option value="">--Please select state--
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="NC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="DC">Washington DC
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select></td>
<td class="boldtext">Zip:</td><td class="text"><input type="text" name="txtZip" size="5" value="#SESSION.zip#"></td>
</tr>
<tr>
<td class="boldtext">Home Phone:</td><td class="text"><input type="text" name="txtHPhone" value="#SESSION.hphone#"></td>
</tr>
<tr>
<td class="boldtext">Work Phone:</td><td class="text"><input type="text" name="txtWPhone" value="#SESSION.wphone#"></td>
</tr>
<tr>
<td class="boldtext">E-Mail:</td><td class="text"><input type="text" name="txtEmail" value="#SESSION.email#" size="30"></td>
</tr>
<tr><td colspan="6" align="middle"><input type="SUBMIT" value="Save Changes"></td></tr>
</form>

</table></cfif>
</cfoutput>

<cfif #loggedIn# is "yes">

<cfquery name="FindMember" datasource="bbitestdb">
SELECT * FROM Members
WHERE MemberId = '#SESSION.Auth.MemberId#'
AND lname = '#SESSION.Auth.LastName#'
</cfquery>

<cfoutput query="FindMember">
<table border="0" bgcolor="f5f5f5" cellpadding="2" cellspacing="2">
<form action="confirm.cfm" method="post" onSubmit = "return isReady(this);">
<tr>
<td class="boldtext">Member Id:</td>
<td class="text"><input type="text" name="txtMemberId" size = "10" value="#MemberId#"></td>
</tr>
<tr>
<td class="boldtext">First Name:</td><td><input type="text" name="txtFName" value="#fname#"></td><td>Last Name:</td><td><input type="text" name="txtLName" value="#lname#"></td><td>MI:</td><td><input type="text" name="txtMI" size="2"></td>
</tr>
<tr>
<td>Address:</td><td><input type="text" name="address_street" value="#stno#"></td>
</tr>
<tr>
<td>Address 2:</td><td><input type="text" name="address_street2" value="#stno2#"></td>
</tr>
<tr>
<td>City:</td><td><input type="text" name="address_city" value="#city#"></td>
<td>State:</td><td><select name="txtState"><option value="">--Please select state--
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="NC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="DC">Washington DC
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select></td>
<td>Zip:</td><td><input type="text" name="txtZip" size="5" value="#zip#"></td>
</tr>
<tr>
<td>Home Phone:</td><td><input type="text" name="txtHPhone" value="#hphone#"></td>
</tr>
<tr>
<td>Work Phone:</td><td><input type="text" name="txtWPhone" value="#wphone#"></td>
</tr>
<tr>
<td>E-Mail:</td><td><input type="text" name="txtEmail" value="#email#"></td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="reset" value="Reset"> <input type="submit" value="Start">

</td>
</tr></cfoutput>
</form></table>

<cfelseif #mode# NEQ "edit">
<table border="0" bgcolor="f5f5f5" cellpadding="2" cellspacing="2">
<tr>
<td colspan="4" class="text">
<p>Please fill out the form below. You will be sent to PayPal to make a donation after the below information is confirmed. Thank you for donating to B'nai B'rith! <br><br>
<span class="itext">* denotes a required field.</span><br><br></td>
</tr>
<form action="confirm.cfm" method="post" onSubmit = "return isReady(this);">
<tr>
<td class="text">Member Id:<br/>(if known)</td>
<td class="text"><input type="text" name="txtMemberId" size = "10"></td>
</tr>
<tr>
<td class="text">*First Name:</td><td class="text"><input type="text" name="txtFName"></td><td class="text">Last Name:</td><td class="text"><input type="text" name="txtLName"></td><td class="text">MI:</td><td class="text"><input type="text" name="txtMI" size="2"></td>
</tr>
<tr>
<td class="text">*Address:</td><td><input type="text" name="txtAdd1"></td>
</tr>
<tr>
<td class="text">Address 2:</td><td><input type="text" name="txtAdd2"></td>
</tr>
<tr>
<td class="text">*City:</td><td class="text"><input type="text" name="txtCity"></td>
<td class="text">*State:</td><td class="text"><select name="txtState"><option value="">--Please select state--
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="NC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="DC">Washington DC
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select></td>
<td class="text">*Zip:</td><td><input type="text" name="txtZip" size="5"></td>
</tr>
<tr>
<td class="text">*Home Phone:</td><td class="text"><input type="text" name="txtHPhone"></td>
</tr>
<tr>
<td class="text">*Work Phone:</td><td class="text"><input type="text" name="txtWPhone"></td>
</tr>
<tr>
<td class="text">*E-Mail:</td><td class="text"><input type="text" name="txtEmail"></td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="reset" value="Reset"> <input type="submit" value="Start"></td></cfif></tr></form></table>

_____________________________________________

Confirm.cfm page:

<cfset bnaibrith="Donate!">
<cfset chhead =3>

<cfset tier =4>
<cfset tierb =4>
<cfset side =5.2>
<cfset keywordspage="israel, world jewry">
<cfoutput><cfinclude template="#request.header#"></cfoutput>


<cfif IsDefined("FORM.txtMemberId&quot

is "true">
<cfset #SESSION.MemberId# = FORM.txtMemberId>
<cfelse>
<cfset #SESSION.MemberId# = "none">
</cfif>

<cfset #SESSION.fname# = FORM.txtFName>
<cfset #SESSION.lname# = FORM.txtLName>
<cfset #SESSION.mi# = FORM.txtMI>
<cfset #SESSION.stno# = FORM.txtAdd1>
<cfif IsDefined("FORM.txtAdd2&quot

is "true">
<cfset #SESSION.stno2# = FORM.txtAdd2>
<cfelse>
<cfset #SESSION.stno2# = "">
</cfif>

<cfset #SESSION.city# = FORM.txtcity>
<cfset #SESSION.state# = FORM.txtstate>
<cfset #SESSION.zip# = FORM.txtzip>
<cfset #SESSION.hphone# = FORM.txthphone>
<cfset #SESSION.wphone# = FORM.txtwphone>
<cfset #SESSION.email# = FORM.txtemail>

<table cellpadding="2" cellspacing="2" border="0"><tr><td class="text">
<span class="boldtext">Please check the information below and confirm. You will then be taken to <b>PayPal</b> to make a donation.</span>

<p><b>Donor Information:</b></p>
</td></tr>
<td>
<cfoutput>
<table>
<tr><td valign="top" class="boldtext">Member Id:</td><td class="text">#SESSION.MemberId#</td></tr>
<tr><td valign="top" class="boldtext">Name:</td><td valign="top" class="text">#SESSION.fname# #SESSION.mi# #SESSION.lname#</td></tr>
<tr><td valign="top" class="boldtext">Address:</td><td valign="top" class="text">#SESSION.stno#<br/>#SESSION.stno2#<br/>
#SESSION.city#, #SESSION.state#  #SESSION.zip#</td></tr>
<tr><td valign="top" class="boldtext">Home Phone:</td><td valign="top" class="text">#SESSION.hphone#</td></tr>
<tr><td valign="top" class="boldtext">Work Phone:</td><td valign="top" class="text">#SESSION.wphone#</td></tr>
<tr><td valign="top" class="boldtext">E-Mail:</td><td valign="top" class="text">#SESSION.email#</td></tr>
</table>
</td></tr></table>

<form action="zdonate.cfm" method="post">
<input type="hidden" name="mode" value="edit">
<input type="submit" value="Go Back & Edit">
</form>

<form action="

https://www.paypal.com/cgi-bin/webscr"

method="post">
<input type="hidden" name="item_name" value="General Donation">
<input type="hidden" name="cmd" value="_ext-enter">
<input type="hidden" name="redirect_cmd" value="_xclick">
<input type="hidden" name="business" value="website@bnaibrith.org">
<input type="hidden" name="item_number" value="2">
<input type="hidden" name="first_name" value="#SESSION.fname#">
<input type="hidden" name="last_name" value="#SESSION.lname#">
<input type="hidden" name="address1" value="#SESSION.stno#">
<input type="hidden" name="address2" value="#SESSION.stno2#">
<input type="hidden" name="city" value="#SESSION.city#">
<input type="hidden" name="state" value="#SESSION.state#">
<input type="hidden" name="zip" value="#SESSION.zip#">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="return" value="

http://216.119.115.20/giving/fund/annual_give/success.cfm">

<input type="hidden" name="notify_url" value="

http://216.119.115.20/giving/fund/annual_give/ipn.cfm">

tvfahlberg · Jan 5, 2004

I can't help with the cold fusion question, but I see your Javascript problem. You're referring to the wrong names in your checks. For example you refer to "form.fullname". But form.fullname doesn't exist. You're confusing the cfm field names with the form names. In this case you must use "first_name" and "last_name".

-- taf

tanderso · Jan 5, 2004

I hope that this isn't your only validation. You should never trust client-side data implicitely, even if validated with JavaScript, since it is trivial for someone with malicious intent to bypass your JavaScript and enter nasty stuff to your server. JavaScript is useful for alerting users to invalid data without hitting the server, but not at all useful for sanitizing the data before being used server-side, particularly when submitting to a payment processor. Just FYI in case you weren't aware.

Sincerely,

Tom Anderson
Order amid Chaos, Inc.

http://www.oac-design.com

radiance · Jan 5, 2004

Hello.

Thank you for your suggestions. The last email from Tom referred to additional validation for the form.

<< You should never trust client-side data implicitely, even if validated with JavaScript, since it is trivial for someone with malicious intent to bypass your JavaScript and enter nasty stuff to your server. >>

I am not validating credit card info, but I am interested in suggestions for additional validation.

Thank you so much!!

member 472187 · Jan 5, 2004

The best method is to build the javascript edits and then back them up with cfml edits matching as closely as you can. You don't want to be hitting the server with known bad data, yet you want to cover yourself for the few that do not have javascript turned on. You mentioned you were using cfform tags. It is not recommended to use them as they are not as robust as javascript which is backed up with regular cfml edits. Regardless of the data you want to cleanse the data as much as you can with javascript and have the coldfusion as a backup to it.

It can take some time to build both js and cfml edits, but maintaining a library can help. You can cut and paste either as needed and once you build something close to what you need it can be modified with minimal changes.

Hope this helps.

tanderso · Jan 5, 2004

Re: validation

While JavaScript can alert users to invalid data before submitting, once it is submitted, you can't just assume that the data is good. I could very easily view your source code and construct my own input completely bypassing your scripts. Therefore, you must validate all info server-side as well.

For example, if you require a non-empty and unique email address, then you should use ColdFusion or other language of choice to make sure it exists, looks like an email address, and does not already exist in your database after you've accepted input from your client code. This is especially true if you use user input to modify the filesystem in any way, such as saving a file named after the person's name, etc.

I understand after reviewing your code further that in this case, you're just submitting directly to PayPal, so they will be taking care of server-side validation. If something is wrong with the data, they'll return an error. But if you ever do anything else with user data besides sending it off to someone else, server-side validation is something to keep in mind.

Sincerely,

Tom Anderson
Order amid Chaos, Inc.

http://www.oac-design.com

radiance · Jan 6, 2004

Validation is still not working. Apart from being frustrated, I am not sure what the problem can be. If there are errors, the users can go directly to confirm.cfm.

http://bnaibrith.org/giving/fund/annual_give/zdonate.cfm

open to suggestions.

Thanks in advance.

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!

Help! Form validation not working using Javascript and Coldfusion 3

radiance

Programmer

tvfahlberg

Programmer

tanderso

IS-IT--Management

radiance

Programmer

member 472187

Guest

tanderso

IS-IT--Management

radiance

Programmer

Similar threads

Part and Inventory Search

Sponsor