How to validate size and color selection

I'm trying to validate that a size and color were selected before sending the item purchase to the shopping cart.

I've tried using the WebAssist Validation Toolkit and also writing my own validation code once the form reaches the eCart, but have had no luck with either. The item is just added to the cart without a size or color.

Apparently the eCart is not receiving the data as a form field, so that I can't validate that way. It must go into an array and I can't seem to figure out how to validate.

One of the issues is that not all items have a size and color selection, so that the validation must include an if/then statement (if the form.field exists, then validate it)

Using CF8, Dreamweaver CS3 and latest version of eCart and ValidationToolkit

There is a fundamental problem with this scenario, you only validate values for form elements, not weather they are on a page. So to do this server side you would need to check the value of the element, if it is not there this will cause the validation to fail.

One way to get around this would be to apply the server validation and set the validation redirect to go back to this same page. This will work fine for the items with size and color, for the items that do not have a size and color though you would need to add in some hidden form elements named the same and have a value for them. With these items though you want to make sure you do not bind a size and color in the add to cart server behavior otherwise it will use these hidden form elements.

Now I'm really confused. I've tried both client and server validation but they're not working. If I don't bind the color and size to the add to cart, how will it get passed on? I'm using the PayPal Standard so I want to pass these options on.

If the item has no color or no size, then I have a hidden form field to pass the string "n/a" so that there is always a form field for color and for size.

Here's an example of the code for color (size is the same):
<!--- //////////////////////// If there is a selection for colors or sizes, display it here --->
<CFIF #getItem.Colors# NEQ "">
<tr>
<td colspan="6" align="left">
<!--- If Color Selection is available, create drop down list box from array --->
<SELECT name="os0" SIZE="1" class="ppform">
<OPTION value="not selected" >Select Color&nbsp;</OPTION>
<CFLOOP FROM="1" TO="#ArrayLen(ColorList)#" INDEX="i" >
<CFOUTPUT>
<OPTION value="#trim(ColorList[i])#">#ColorList[i]# </OPTION>
</CFOUTPUT>
</CFLOOP>
</SELECT>
PLEASE SELECT A COLOR
<CFELSE>
<input name="os0" type="hidden" value="N/A"/>
&nbsp; </td>
</tr>
</CFIF>

There must be some way to validate that a color is chosen if one is available - any other suggestions?

When you are validating a value from a select list you will be using the required/not blank/selection made validation. This will ensure that the option the user selects has a value attribute with something in it. You will need to make the value for the 'select color' be "". So this:

<OPTION value="not selected" >Select Color&nbsp;</OPTION>

Should be like this:

<OPTION value="" >Select Color&nbsp;</OPTION>

If you apply the required validation on this field it will fail the validation if the user has this option selected.

For the items that don't have these options you will need to have a hidden form element that has the same name and a value to ensure that the validation does not fail. I hope this clears things up a little, if you have any other questions please let us know.

I had already tried what you suggested but thought maybe I missed something so I tried the validation again using "" as the default selection and validating for "required" but it didn't work. The color/sizes were just added to the cart as blank.

I tried client side validation and server side validation.

Is there some other time of script I could use before the page goes to the cart?

You can validate a select list using the required not blank selection made validation. The server side would be best. I have crafted an example page of this type of server side validation. Here is what I did.

Once the form was crafted and the select list was in place I added the WA Validation Toolkit > Server Validations from the server behaviors. In here I choose the button pressed trigger then using the select list I choose the required/not blank/selection made validation. I then used the lightning bolt icon to select the select list in my form.

Once it was selected I added the validation using the plus button. When the options window for the validation appeared I unchecked the box for 'allow spaces without characters'. I then clicked ok on the interfaces.

I also added in an error message, then I selected the error message and used the validation show if server behavior to display the message when that validation failed. Here is a link to the example that I created, if you check the source you can see the select list values and how I have them setup.

select_list.php

I looked at your example and went back to square one but still no success with validation.

I am posting data from the product details form to the eCart. I put my validation code on the eCart page. My Validation is for a required/not blank field. If validation fails, the eCart code is supposed to redirect to the product detail page.

1) The code does not redirect back to the product detail page. I'm sure it would need to have the item id in order to redirect back to the right product but that info doesn't seem to carry over in a format I can use to call the right item - such as "product_Details.cfm?MerchID=62"

I then placed the "showif" code on the product detail page. Now when I go back to the product detail page it is always displaying the error message.

Here's the showif code on the product details page:

<cfif (ValidatedField("cart","cart") NEQ "")>
<cfif ((Find("," & "1" & "," , "," & ValidatedField("cart","cart") & ",") GT 0 OR "1" EQ ""))>
<cfif (NOT(false))>
<span class="error"><img src="../images/icons/exclamation.jpg" alt="Error!" /> Please make a selection!</span>
<!--- WAFV_Conditional cart.cfm cart(1:) --->
</cfif>
</cfif>
</cfif>

I also need some kind of qualifier code for the "keep shopping" button in the cart because it tries to go to the product detail page but since there is no merchid, it just displays and "item not found" message.

I'm sure both redirects (validation failure) and (keep shopping) need some kind of #cgi.query.string# but I can't seem to figure it out.


PS - since I posted this I removed the validation from the cart page and now the "keep shopping" function works - so something about the validation caused a problem with that.

Since your add to cart functionality is on the detail page you will also need to have the validations occur on this page as well. The server validations should only be applied to the page that is specified in the action of the form since this is the page that receives the posted data from the form. Since this data is not being posted to the cart display page the validation that checks for it will fail every time. Please give this a try and if there are any further issues please let us know.