Select validation problem

Question

Hello,
I'm trying to learn Spry, but I'm really confused right now.
I've got one page with several validation areas (textbox, textarea,
select) that works beautifully, and another one I'm working on now
that I can't get to work. I copied the code from one page to the
other and used different names, and sometimes the error message
shows on the new page, but the submit button allows the page to
continue no matter what.
Here's the working code:
(from one .cfm file)
<script src="includes/SpryValidationTextField.js"
type="text/javascript"></script>
<link href="css/SpryValidationTextField.css"
type="text/css" rel="stylesheet" />
<script src="includes/SpryValidationSelect.js"
type="text/javascript"></script>
<link href="css/SpryValidationSelect.css" type="text/css"
rel="stylesheet" />
<script src="includes/SpryValidationTextarea.js"
type="text/javascript"></script>
<link href="css/SpryValidationTextarea.css"
rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"
src="includes/SpryCollapsiblePanel.js"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet" type="text/css" />
<cfif ...
<cfoutput>
<form action="pro_ad_new.cfm?action=1" method="post"
name="pro_new">
#new_pro_fields()#
</form>
</cfoutput>
...</cfif>
(inside add_new_submission function in another file)
<td class="wdModData" style="text-align:center;
border-right-width:0; vertical-align:middle;">
<span id="ValidSel1">
<select name="abbr_index" size="1"
style="width:175px;background-color:lemonchiffon">
<option value="-1">Select a Command</option>
<cfloop index="i" from="1" to="#session.command.num#">
<cfset abbr = session.command.info
.abbreviation>
<cfoutput>
<cfif arguments.abbr_index EQ i>
<option value="#i#" selected>#abbr#</option>
<cfelse>
<option value="#i#">#abbr#</option>
</cfif>
</cfoutput>
</cfloop>
</select>
<span class="selectInvalidMsg">Command is
required.</span>
</span>
<script type="text/javascript">
var ValidSel1 = new
Spry.Widget.ValidationSelect("ValidSel1",{invalidValue:"-1",
validateOn:["change"]});
</script>
</td>
<td class="wdModData" style="text-align:center;
border-left-width:0; border-right-width:0;
vertical-align:middle;">
<span id="ValidFY">
<select name="fy" size="1"
style="background-color:lemonchiffon">
<option value="-1">Fiscal Year</option>
<cfoutput query="getyears">
<cfif arguments.fy EQ getyears.year>
<option value="#getyears.year#"
selected>#getyears.year#</option>
<cfelse>
<option
value="#getyears.year#">#getyears.year#</option>
</cfif>
</cfoutput>
</select>
<span class="selectInvalidMsg"><br />Fiscal Year
is required.</span>
</span>
<script type="text/javascript">
var ValidFY = new
Spry.Widget.ValidationSelect("ValidFY",{invalidValue:"-1",
validateOn:["change"]});
</script>
</td>
<td class="wdModData" style="text-align:center;
border-left-width:0; border-right-width:0;
vertical-align:middle;">
<span id="seq_text">
<cfoutput>
<span class="wdModData"
style="text-align:center;border-left-width:0;vertical-align:middle;">
<input type="text" style="background-color:lemonchiffon;"
onchange="this.style.backgroundColor='azure';" name="seq" size="10"
maxlength="7" class="formField" value="#arguments.seq#" />
</span>
</cfoutput>
<span class="textfieldRequiredMsg">
<br />Number is required.
</span>
<span class="textfieldInvalidFormatMsg">
<br />Numbers or Letters only.
</span>
</span>
<script type="text/javascript">
var TextfieldWidgetObject = new
Spry.Widget.ValidationTextField("seq_text", "custom",
{pattern:"yyyy", isRequired:true, hint:""});
</script>
Here's the NON working code:
(from one file)
<script src="includes/SpryValidationTextField.js"
type="text/javascript"></script>
<link href="css/SpryValidationTextField.css"
type="text/css" rel="stylesheet" />
<script src="includes/SpryValidationSelect.js"
type="text/javascript"></script>
<link href="css/SpryValidationSelect.css" type="text/css"
rel="stylesheet" />
<script src="includes/SpryValidationTextarea.js"
type="text/javascript"></script>
<link href="css/SpryValidationTextarea.css"
rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"
src="includes/SpryCollapsiblePanel.js"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet" type="text/css" />
<cfif ...
<cfoutput>
<form
action="pro_ad_sub.cfm?protocol=#url.protocol#&action=1"
method="post">
#add_new_submission("#pro.status#")#
</form>
</cfoutput>
...</cfif>
(inside add_new_submission function in another file)
<td>
Month
<span id="ValidSel2">
<select name="month" size="1"
style="background-color:lemonchiffon"
onchange="this.style.backgroundColor='azure';">
<option value="-1">Month</option>
<cfset i = "0">
<cfoutput query="getMonths">
<cfset i = #val(i)# + 1>
<cfif arguments.receipt_month EQ val(i)>
<option value="#val(i)#"
selected>#getMonths.month#</option>
<cfelse>
<option
value="#val(i)#">#getMonths.month#</option>
</cfif>
</cfoutput>
</select>
<span class="selectInvalidMsg"><br />Month is
required.</span>
</span>
<script type="text/javascript">
var ValidSel2 = new
Spry.Widget.ValidationSelect("ValidSel2",{invalidValue:"-1",
validateOn:["change"]});
</script>
</td>
<td class="wdModData"> 
Day
<span id="ValidSel3">
<select name="day" size="1"
style="background-color:lemonchiffon"
onchange="this.style.backgroundColor='azure';">
<option value="-1">Day</option>
<cfoutput query="getDays">
<cfif arguments.receipt_day EQ getDays.day>
<option value="#getDays.day#"
selected>#getDays.day#</option>
<cfelse>
<option
value="#getDays.day#">#getDays.day#</option>
</cfif>
</cfoutput>
</select>
<span class="selectInvalidMsg"><br />Day is
required.</span>
</span>
<script type="text/javascript">
var ValidSel3 = new
Spry.Widget.ValidationSelect("ValidSel3",{invalidValue:"-1",
validateOn:["change"]});
</script>
</td>
<td class="wdModData"> 
Year
<span id="ValidSel">
<select name="year" size="1"
style="background-color:lemonchiffon"
onchange="this.style.backgroundColor='azure';">
<option value="-1">Year</option>
<cfoutput query="getYears">
<cfif arguments.receipt_year EQ getYears.year>
<option value="#getYears.year#"
selected>#getYears.year#</option>
<cfelse>
<option
value="#getYears.year#">#getYears.year#</option>
</cfif>
</cfoutput>
</select>
<span class="selectInvalidMsg"><br />Fiscal Year
is required.</span>
</span>
<script type="text/javascript">
var ValidSel = new
Spry.Widget.ValidationSelect("ValidSel",{invalidValue:"-1",
validateOn:["change"]});
</script>
</td>
(end NON working code)
So what have I messed up? I just can't see the code anymore.
Thanks everyone,
Teresa

Answer 1

Hi Diana,
Thanks for your tip, I will try it.
I tried to come back to read this earlier this week, but the
support pages wouldn't load, so I kept trying things. The only way
I have to debug any of this is the log file and using (right click
view source), and there you can see the flow of how the code is
sent to the browser. I was seeing that the spry code was coming
later in the page than I thought it should, so I kept moving it
around to see what would happen.
The thing that finally worked was adding this new code:
<!-- needed for validation of required fields in
add_new_submission -->
<span id="spryselect1">
<span class="selectRequiredMsg">
This is a required field.
</span>
</span>
before this existing code:
<!-- addition form -->
<cfoutput>
<form
action="pro_ad_sub.cfm?protocol=#url.protocol#&action=1"
method="post">
#add_new_submission("#pro.status#")#
</form>
</cfoutput>
I don't understand why I have to do this here, but not in the
upper (working) code in my previous post. I really really don't get
it. When that new snippet is before the function call, the spry in
the function works, but you never see output from that new code.
When you remove that new snippet, the spry in the function doesn't
work.
Totally confused!?!
teresa