What pattern do I need to jQuery Validate a value less than a particular number?

I have two options in a drop-down menu with corresponding numeric values on my product detail page:
Dimmable (1)
Non-Dimmable (2)

When the user first opens the product detail page I want the drop down menu to say "Please select". I initially set this to have a blank value and for the jQuery Validation to require a value - so it would fail if the user left if on "Please select". However, I have an onchange function on the page that HAS to have a value in order to carry out a lookup for a product code so that it can display the correct price. So, it occurred to me that since "Non-dimmable" is the default value for any product I could use "2" for the value of the "Please select" option but, of course, the jQuery Validation accepts it as a value.

So, my solution (and please let me know if you think this is nuts!), is to set the value of the Please select option to a 3 and make the jQuery Validation check for a value less than 3.

What pattern do I need to achieve this? I don't see an option, in the list of validations, for "is less than".
Thank you
NJ

This cant be done with jquery validation, you would need to use server validation.

When the page loads, you already know the default price, so just show the default price.

the on change wont take effect on page load, it will only trigger when the selection is changed. on page load show the default price, then when a selection is made, let the onChange event look up the price to change what is displayed based on the selection.

Originally Said By: Jason Byrnes

  the on change wont take effect on page load, it will only trigger when the selection is changed. on page load show the default price, then when a selection is made, let the onChange event look up the price to change what is displayed based on the selection.  

Problem is Jason, there are up to three drop down menu's...Colour (which doesn't affect price), Dimmable (which does) and Sensor (which does).

When the page initially loads I can show the default price, sure, but the customers first choice is colour therefore they'll have, for example...

Colour Drop-Down - Warm White
Dimmable Drop-Down - Please select
Sensor Drop-Down - Please select

This combination isn't available as a product so what's happening is that the price disappears, as does the lookup product code (because there isn't a product with this combination).

That was why I was trying to provide some kind of value for the Dimmable and Sensor drop downs, even though they're sat on "Please select", because the page will assume that those values are the default and, therefore, won't try to change the price or product code?

Does that sound sensible?
Thank you
NJ

no, that does not sound sensible.

all options should be left at make a selection.

When the page initially loads they are all left at make a selection. What I'm saying is that if a customer first chooses colour (they can't select them all at once), then the onchange event gets messed up because there is no "Blue / Please Select / Please Select" combination so the price and product lookup code disappears.

The Dimmable and Sensor options are either Yes or No - Dimmable or Non-Dimmable and Sensor or No Sensor. So...I felt that if I made the "Please select" value the same as "No" for both dimmable and sensor, albeit with a different value for "no" (ie. 3) then I could validate against those fields being less than a value of 3 and, therefore, the user would have to make a selection but, at the same time, the default fee and product code would be listed because, using the above example, their choice would be "Blue / Non-Dimmable / No Sensor".

Am I approaching this wrong?
Thank you
NJ

instead of using onchange for the select lists, add a calculate price button, and run the look up on the calculate price button so that the look up only occurs once the user has made all selections and presses the calculate price option.

onchange is what Ray has put in place for us Jason so we're sticking with it because it cost us $198 in a Premier Support ticket! :(

Regardless though, adding a calculate price button seems, to me, to be adding another level of complication/choice/click for the customer. They want to see the price and add to basket, not to have to calculate it themselves, no?

Do you feel that my solution, as described above, will cause problems?
Thank you
NJ

I had no way of knowing this was implemented in a premier appointment as you did not specify this in your initial question.

as I have already said, the numeric range validation you are asking about cannot be done with jquery.

so to answer your question;

"Do you feel that my solution, as described above, will cause problems?"

Yes, because it cant be done that way.

Let me check with Ray to see what he would suggest, I don't know how he implemented the lookup, so I need to check with him. I'll let you know when I have more details.

looking at the source code for your page, it looks like the code that updates the price is:

function updatePriceDisplay() {
  var priceInfo = (silent_form[1]).split(":");
  document.getElementById("productCode").innerHTML = priceInfo[1];
  document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat";	
}

I Would change that to:

function updatePriceDisplay() {
  var priceInfo = (silent_form[1]).split(":");
  if(priceInfo[1] !="") { document.getElementById("productCode").innerHTML = priceInfo[1]; }
  if(priceInfo[0] !="") { document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat"; }	
}

so that the price displayed is only updated if a price is returned by the lookup.

Originally Said By: Jason Byrnes

  looking at the source code for your page, it looks like the code that updates the price is:

function updatePriceDisplay() {
  var priceInfo = (silent_form[1]).split(":");
  document.getElementById("productCode").innerHTML = priceInfo[1];
  document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat";	
}

I Would change that to:

function updatePriceDisplay() {
  var priceInfo = (silent_form[1]).split(":");
  if(priceInfo[1] !="") { document.getElementById("productCode").innerHTML = priceInfo[1]; }
  if(priceInfo[0] !="") { document.getElementById("productPrice").innerHTML = "£" + priceInfo[0] + " inc. vat"; }	
}

so that the price displayed is only updated if a price is returned by the lookup.  

That has resolved the issue with the product code and price disappearing, thank you. I'm still left with a problem though...

I have had to create "Parent" products in the products table so that users can view a product detail page but then HAVE to make selection from the variables menu in order to Add to Cart. Making a selection in the variables tables changes the product code and, if applicable, price so that the real product (not the parent) is added to basket.

This works fine for products that are available in all variations...
Cool White / Non-Dimmable
Warm White / Non-Dimmable
Cool White / Dimmable
Warm White / Dimmable

...however if a product isn't available in one of these combinations - lets say that it's not available in Cool White / Dimmable but is available in the other three variations - the user can still select Cool White / Dimmable because Cool White is available in the colour menu and Dimmable is available in the dimmable menu.

Here's an example of that in action:
http://www.ledwarehouseuk.com/LED-Lights-Bulbs.php?lbid=701

How do I prevent this as it is allowing the customer to add the parent product to the cart, which just doesn't work.
Thank you.
NJ