views:

841

answers:

2

Ok, I need help. This is my first question here.

Background: I am working on a charity project, and my portion of the project is to build the Web-To-Case functionality with Salesforce.com. Salesforce.com, if you were unaware, gives its software away free to qualified non-profits. Anyway, the Web-To-Case feature in Salesforce.com generates an HTML form that, when submitted, will send the data back to Salesforce.com and create a ticket. The IDs for the form elements are strings of numbers and letters that would appear to correspond to the fields in Salesforce.com.

Goal: I was trying to build in validation of the dates on a particular form because we found out that unless the dates were formatted just so (12/30/2009 12:00 PM), anything the user entered would not make it into Salesforce.com

Problem: Found a script online (javascript) and modified it to suit my needs. Problem - it does not work. I get a little error in the corner of the browser but it doesn't stop the form from going through (it also doesn't validate) - "Expected ')'" on line 16.

I would love to attach the code here...I hope that's OK. Normally I would cut out only the relevant bits but I fear that people would then say "Hey this will never work - you don't have a closing HTML tag" or whatnot. I'm not sure if it will paste well - it came from a .htm file and the HTML may be interpreted by this forum and that would be...well...not ideal! Okay, I think I figured out how to escape it but there was so much to escape that I cut out most of the comments and most of the truly irrelevant things..

You can see how the form field ids are all funky - most of the examples I saw had straightforward form ids and names...so I wondered if Javascript just can't deal with strings starting with digits as id/names on fields.

I'm also wondering - because I can't verify it by testing since it's not working for other reasons - if my regular expression comes anything close to the date format I specified above. I had to make up my own regular expression since I didn't find anything out in the world like what I wanted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cambridge Cares About AIDS: Request an Asset</title>
<link type="text/css" rel="stylesheet" href="styles.css" />

<SCRIPT LANGUAGE="JavaScript">  // Original JavaScript code by Chirp Internet: www.chirp.com.au    // Please acknowledge use of this code by including this header.  //Code modified to validate a date/time field by Shannon Davis, Company Name Removed.

function checkDates(form)
{
checkDate(form.00N80000003LGJ5);
    checkDate(form.00N80000003LGNt);
}

 function checkDate(field)
 {
   var allowBlank = false;
var minYear = (new Date()).getFullYear();
var maxYear = 2100;

var errorMsg = "";

// regular expression to match required date format
re = /^(\d{1,2})\/(\d{1,2})\/(\d{4})\s(\d{1,2}):(\d{2})+\s([ap]m)+$/;

if(field.value != '') {
  if(regs = field.value.match(re)) {
    if(regs[1] < 1 || regs[1] > 12) {
      errorMsg = "Invalid value for day: " + regs[1];
    } else if(regs[2] < 1 || regs[2] > 31) {
      errorMsg = "Invalid value for month: " + regs[2];
   } else if(regs[3] < minYear || regs[3] > maxYear) {
      errorMsg = "Invalid value for year: " + regs[3] + " - must be between " + minYear + " and " + maxYear;
   }
  } else {
    errorMsg = "Invalid date format: " + field.value;
  }
} else if(!allowBlank) {
  errorMsg = "Empty date not allowed!";
}

if(errorMsg != "") {
  alert(errorMsg);
  field.focus();
  return false;
}
return true;
  }
</SCRIPT>

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
</head>

<BODY>

    <div id="container">
     <div id="top_photo">
      <img src="images/ccaa_banner.jpg" alt="banner" width="800" height="181" />
     </div>

     <div id="left_colum" style="width: 200; height: 256"><a href="index.html">
                      <img src="images/cca_logo.gif" alt="logo" border="0" width="178" height="84" /></a>
                    <p class="address">Cambridge Cares About AIDS<br />17 Sellers Street<br /> Cambridge, MA 02139<br />617.661.3040</p>
                <br />

                </div>
      <div id="right_colum">
                        <div id="content">

<form id="form" name="form" action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST">

<input type=hidden name="orgid" value="00D80000000M3if">
<input type=hidden name="retURL" value="http://wilmwebtest/CCAA/thank_you.htm"&gt;

<table border=0>

<tr><TD><label for="email">CCA Email:*</label></TD><td><input  id="email" maxlength="80" name="email" size="40" type="text" /><br> </td></tr>

<tr>
<td><label for="subject">Subject:</label></td><td><input  id="subject" maxlength="80" name="subject" size="40" type="text" /><br></td>
</tr>
<tr><td>
<label for="description">Description*</label></td>
<td>
<textarea name="description" rows="4" cols="25"></textarea><br></td>
</tr><tr>
<input type="hidden" name="recordType" id="recordType" value="0012800000006ZWz">

<tr> <td colspan="2">
<p>Date Format: mm/dd/yyyy hh:mm am/pm<br>example: &quot;08/30/2009 12:00 am&quot;</td></tr>
<tr><td>When Needed (Start):*</td>
<td><input id="00N80000003LGJ5" name="00N80000003LGJ5" size="40" type="text" /></span><br></td></tr>
<tr>
<td>
When Needed (End):<span class="dateInput">*</td>
<TD>

<input  id="00N80000003LGNt" name="00N80000003LGNt" size="40" type="text" /></span><br></td>
</tr>
</table>
<input type="hidden"  id="external" name="external" value="1" /><br>

<input type="submit" name="submit" value="Submit Asset Request" onClick="checkDates    (this.form);" >

</form>

                        </div>
     </div>
   <div id="clearit">
   </div>
    </div>
   </body>
   </html>
+2  A: 

Your checkDate function is correct. The problem is in your checkDates function. Javascript doesn't like variables that begin with numbers. Change it to:

function checkDates(form)
{
    checkDate(form.elements['00N80000003LGJ5']);
    checkDate(form.elements['00N80000003LGNt']);
}

and it should work as intended.

Also, in order for an invalid date to cancel the form from being submitted, you must change your submit button's onClick attribute to:

onclick="return checkDates( this.form )"

Otherwise, the form will be submitted no matter what.

On a side note, the error message you mention sounds like a classic 'WTF?' Internet Explorer error message. Consider upgrading to the latest version of IE (IE8), which has much better error messages than the previous versions, or using Firefox. Firefox's Error Console is second to none when it comes to tracking down Javascript (and CSS) errors.

cmptrgeekken
Second the IE upgrade or FireFox suggestion. IE is notorius for bad javascript error reporting. the line numbers don't make any sense and they seemed to only have one error message to report. :-)
Jeremy Wall
Well, I found out today that apparently there's a 'Previous' button in that message dialog. Still, the line numbers make no sense and 'Error: Object Expected' doesn't really tell you very much.
cmptrgeekken
I could just hug you! Off to try it.Back - it worked! Is there a way on this site to mark this as the correct answer? Not only am I happy, but you have actually helped an awesome non-profit organization!
Shannon Davis
A: 

Thank you for the great answer to this question... I was having the same problem with weird field ID's in salesforce. (ie: name="00N30000003oNZg")

Just like you said the solution was:

web_form.elements['00N30000003phJJ'].value

instead of

web_form.00N30000003phJJ.value

Scott Mulligan