I have a form on a PHP page which includes several inputs that use Spry (http://labs.adobe.com/technologies/spry/samples/validationwidgets/with_spry_region/widgets_region.html) 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 (http://www.zapatec.com/website/main/coding.jsp) 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.

    Going to shoot form the hip here. Do all the form fields have an "id" set to them, not a "name" but an "id".

    The reason I ask is because it is likely that script is using "getElementById()" to check the form fields and IE will do the check for elements with the "name" attribute that matches the "id" that "getElementById()" is looking for. Were as Firefox will hold true to the W3C standards and only looks for elements with that "id" set.

    Now do not just jump over to your code and start changing all the "name"s to "id"s as you will need "name"s to process what is submitted.

      Krik,

      Thank you for your reply.

      I am using both name and id tags so I don't think that's the culprit.

        I would guess Spry runs it check based on event. It appears that Spry is not detecting when the date picker places a date in the date field. I suspect the reason is that when the date picker enters a value it doesn't trigger and event on that field as that field was not the one the focus was set to.

        How to fix it is anyones guess as we have no idea what the code looks like and even if we did I suspect it would take days to sort through it and figure it out.

          It's fixed!

          Here is a working sample in case someone else needs help:

          <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>
            Write a Reply...