[RESOLVED] Date Picker Calander Input Form Data Not Firing Spry

@jeffsheadJan 26.2009

I have a form which includes several inputs that use Spry (~~[url]~~http://labs.adobe.com/technologies/spry/samples/validationwidgets/with_spry_region/widgets_region.html[/url]) for validation. Once text is entered into an input, Spry will immediately display a green check mark if the entered text is valid or a red “x” if it fails validation before the form is submitted.

One of the input boxes allows the user to manually enter a date or use the Zapatec Date Picker (~~[url]~~http://www.zapatec.com/website/main/coding.jsp[/url]) to populate the input box. Everything works in IE7, but if the date picker is used in FF3, Spry is not triggered so the validation is not performed until the form is submitted. When using the date picker, the date is properly displayed in the input box. If the date is entered manually, the validation is performed.

Does anyone have any ideas as to where I should start looking for the cause and the fix? Like I said, it works in IE7, but not in FF3.

to post a comment

JavaScript

6 Comments(s) _↴

@ChazzlJan 26.2009 — #Heyas Jeff,

Firefox is not detecting the [I]onchange[/I] event when the input field is dynamically updated.

I'm not familiar with Spry well enough to know what function triggers the validation routine and there's a ton of scripts associated with the application.

So, here's my best advice at this time to get you pointed in the right direction.

Zapatec has a configuration that will allow you to call additional functions after it has updated the html form input field. You can use that directive to trigger Spry to validate the data. The trick is, figuring out how to manually trigger Spry.

Here's the config you can try:

[code=html]
 <script type="text/javascript">
 Zapatec.Calendar.setup({
 // ...your usual config here
 onUpdate : "triggerSpry"
 });
 
  function triggerSpry() {
   myDateInput = getElementById("MyDateInputId");
   // Spry.Widget.ValidationTextField = function(element, type, options)
   // Function located in SpryValidationTextField.js Line 78
   Spry.Widget.ValidationTextField(myDateInput, 'date', '');
  }
 </script>
 [/code]

Now, this more than likely will not work as-is. I've only guessed on the Spry trigger. You may need to do some research on how to use Spry in this manner. But this should solve the problem once you have the right pieces in place.

References:

http://www.zapatec.com/website/ajax/zpcal/jsdocs/overview-summary-calendar-setup.js.html

— Chazzl

@jeffsheadauthorJan 27.2009 — #Chazzl,

Thank you so much for your well written reply. I tried your suggestion, but I was not able to get it to work. Maybe I misunderstood something.

Here is an example of my original page:

[code=html]
 <html>
 <head>
 <link href="spry/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
 <link href="spry/validation.css" rel="stylesheet" type="text/css" />
 <link href="calander/winter.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript" src="spry/SpryValidationTextField.js"></script>
 <script type="text/javascript" src="spry/SpryValidationSelect.js"></script>
 <script type="text/javascript" src="spry/SpryValidationTextarea.js"></script>
 <script type="text/javascript" src="spry/SpryValidationPassword.js"></script>
 <script type="text/javascript" src="spry/SpryValidationConfirm.js"></script>
 
 <script type="text/javascript" src="calendar/zapatec.js"></script>
 <script type="text/javascript" src="calendar/calendar.js"></script>
 <script type="text/javascript" src="calendar/calendar-en.js"></script>
 </head>
 <body>
 <form style="margin:0px; padding:0px;" method="post" action="">
 <table>
 <tr id="sprystartdate">
 <td height="38px" class="formLabel">Start Date:<span class="textfieldRequiredMsg"><br/>Blank</span><span class="textfieldMinValueMsg"><br/>Must be after 01/01/2009</span><span class="textfieldMaxValueMsg"><br/>Must be before 12/31/2009</span><span class="textfieldInvalidFormatMsg"><br/>Enter valid date format</span></td>
 <td height="38px"><input type="text" size="15"  id="startdate" name="startdate" value="" />&nbsp;<img id="trigger1" src="calander/showCalander.gif" border="0" height="18" width="18" alt="Show Calendar">
 <script type="text/javascript">
 var cal1 = Zapatec.Calendar.setup({
 weekNumbers       : false,
 step              : 1,
 range             : [2006.01, 2049.12],
 electric          : false,
 inputField        : "startdate",
 button            : "trigger1",
 ifFormat          : "&#37;m/%d/%Y",
 daFormat          : "%m/%d/%Y",
 align             : "CR"
 }); 

 </script>
 &nbsp;&nbsp;<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/></td>
 </tr>
 </table>
 <script type="text/javascript">
 <!--
 var sprystartdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
 //-->
 </script>
 </body>
 </html>
 [/code]

I changed it to this, but it did not solve the problem:

[code=html]
 <html>
 <head>
 <link href="spry/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
 <link href="spry/validation.css" rel="stylesheet" type="text/css" />
 <link href="calander/winter.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript" src="spry/SpryValidationTextField.js"></script>
 <script type="text/javascript" src="spry/SpryValidationSelect.js"></script>
 <script type="text/javascript" src="spry/SpryValidationTextarea.js"></script>
 <script type="text/javascript" src="spry/SpryValidationPassword.js"></script>
 <script type="text/javascript" src="spry/SpryValidationConfirm.js"></script>
 
 <script type="text/javascript" src="calendar/zapatec.js"></script>
 <script type="text/javascript" src="calendar/calendar.js"></script>
 <script type="text/javascript" src="calendar/calendar-en.js"></script>
 </head>
 <body>
 <form style="margin:0px; padding:0px;" method="post" action="">
 <table>
 <tr id="sprystartdate">
 <td height="38px" class="formLabel">Start Date:<span class="textfieldRequiredMsg"><br/>Blank</span><span class="textfieldMinValueMsg"><br/>Must be after 01/01/2009</span><span class="textfieldMaxValueMsg"><br/>Must be before 12/31/2009</span><span class="textfieldInvalidFormatMsg"><br/>Enter valid date format</span></td>
 <td height="38px"><input type="text" size="15"  id="startdate" name="startdate" value="" />&nbsp;<img id="trigger1" src="calander/showCalander.gif" border="0" height="18" width="18" alt="Show Calendar">
 <script type="text/javascript">
 var cal1 = Zapatec.Calendar.setup({
 weekNumbers       : false,
 step              : 1,
 range             : [2006.01, 2049.12],
 electric          : false,
 inputField        : "startdate",
 button            : "trigger1",
 ifFormat          : "%m/%d/%Y",
 daFormat          : "%m/%d/%Y",
 align             : "CR",
 onUpdate 	  : "triggerSpry"
 });
 
   function triggerSpry() {
   myDateInput = getElementById("startdate");
   // Spry.Widget.ValidationTextField = function(element, type, options)
   // Function located in SpryValidationTextField.js Line 78
   // Spry.Widget.ValidationTextField(myDateInput, 'date', '');
   var sprystdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
   } 
   </script>
   &nbsp;&nbsp;<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/></td>
  </tr>
 </table>
 <script type="text/javascript">
 <!--
 var sprystartdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
 //-->
 </script>
 </body>
 </html>
 [/code]

There are many other input boxes on the actual page. I used "[I]var cal1 = Zapatec.Calendar.setup({"[/I] because there are two calendars as well.

I also received the suggetion below, but I'm not sure what needs changing:

[COLOR="Navy"][I]You can tell spry to validate the field.

example:

var field = new Spry.Widget.validation.......

field.validate(); //<--- tells spry to validate

So if the calender has any callback functions you could attach the validation to that.[/I][/COLOR]

Any thoughts?

@jeffsheadauthorJan 27.2009 — #I just thought of something... I'm not sure if I'm using the correct terminology, but my 'id' tags are nested in a table. In other words, I am using a table so my Spry error messages are displayed in the ‘td’ that contains my label instead of being displayed in the ‘td’ that contains the input field. This allows me to have the input fields’ labels turn red and bold when Spry is triggered to display an error message. Basically, the ‘id’ of the ‘tr’ is being used by Spry. Not the ‘id’ of the ‘td’ that contains the input field.

This works fine for all of the other fields when using FF3 and IE7, but maybe this is the cause since the date picker fills the input field dynamically. Take a look at the HTML code in my previous reply to see the id’s of the ‘tr’ and ‘td’ tags to get a better understanding. There is a typo in the code above.

Should be:

[code=html]
 ...
 var sprystartdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
 ...
 [/code]

Not:

[code=html]
 ...
 var sprystdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
 ...
 [/code]

@jeffsheadauthorJan 28.2009 — #I changed from this:

[CODE]...
 onUpdate 	  : "triggerSpry"
 });
 
   function triggerSpry() {
   myDateInput = getElementById("startdate");
   // Spry.Widget.ValidationTextField = function(element, type, options)
   // Function located in SpryValidationTextField.js Line 78
   // Spry.Widget.ValidationTextField(myDateInput, 'date', '');
   var sprystdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
   } 
   </script>
 ...[/CODE]

To this:

[CODE]...
 onUpdate 	  : triggerSpry
 });
 
   function triggerSpry() {
   sprystartdate.validate();
   } 
   </script>
 ...[/CODE]

And left this just above the </body> tag:

[CODE]<script type="text/javascript">
 <!--
 var sprystartdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
 //-->
 </script>[/CODE]

This seems to work OK and no errors are reported by IE7.

Does this look OK, or should I be concerned with this fix?

@ChazzlJan 28.2009 — #Nah, that'll work. ?

— Chazzl

@jeffsheadauthorJan 28.2009 — #Chazzel,

Thank you so very much for your help!

Here's the final, if it helps any one:

[code=html]<html>
 <head>
 <link href="spry/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
 <link href="spry/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
 <link href="spry/validation.css" rel="stylesheet" type="text/css" />
 <link href="calander/winter.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript" src="spry/SpryValidationTextField.js"></script>
 <script type="text/javascript" src="spry/SpryValidationSelect.js"></script>
 <script type="text/javascript" src="spry/SpryValidationTextarea.js"></script>
 <script type="text/javascript" src="spry/SpryValidationPassword.js"></script>
 <script type="text/javascript" src="spry/SpryValidationConfirm.js"></script>
 
 <script type="text/javascript" src="calendar/zapatec.js"></script>
 <script type="text/javascript" src="calendar/calendar.js"></script>
 <script type="text/javascript" src="calendar/calendar-en.js"></script>
 </head>
 <body>
 <form style="margin:0px; padding:0px;" method="post" action="">
 <table>
 <tr id="sprystartdate">
 <td height="38px" class="formLabel">Start Date:<span class="textfieldRequiredMsg"><br/>Blank</span><span class="textfieldMinValueMsg"><br/>Must be after 01/01/2009</span><span class="textfieldMaxValueMsg"><br/>Must be before 12/31/2009</span><span class="textfieldInvalidFormatMsg"><br/>Enter valid date format</span></td>
 <td height="38px"><input type="text" size="15"  id="startdate" name="startdate" value="" />&nbsp;<img id="trigger1" src="calander/showCalander.gif" border="0" height="18" width="18" alt="Show Calendar">
 <script type="text/javascript">
 var cal1 = Zapatec.Calendar.setup({
 weekNumbers       : false,
 step              : 1,
 range             : [2006.01, 2049.12],
 electric          : false,
 inputField        : "startdate",
 button            : "trigger1",
 ifFormat          : "%m/%d/%Y",
 daFormat          : "%m/%d/%Y",
 align             : "CR",
 onUpdate 	  : "triggerSpryCal1"
 });
 
   function triggerSpryCal1() {
   sprystartdate.validate();
   } 
   </script>
   &nbsp;&nbsp;<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/></td>
  </tr>
 </table>
 <script type="text/javascript">
 <!--
 var sprystartdate = new Spry.Widget.ValidationTextField("sprystartdate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", minValue:"01/01/2006", maxValue:"12/31/2049", validateOn:["change"]});
 //-->
 </script>
 </body>
 </html>[/code]

Now I just need to clean up the code and move some things around.

Also in #JavaScript _↴

Gmail:How to overlay a scrollbar Advanced Javascript Calculator - few problems playing a different video after another

Success!

Help @jeffshead spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Date Picker Calander Input Form Data Not Firing Spry

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Date Picker Calander Input Form Data Not Firing Spry

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴