I have two select fields:
Select (set as required in the BE):
Dog / cat flap
Options: [No, cat flap white, cat flap brown]
Select (not set as required in BE):
Options [left, right, center]
"Dog / Cat flap"
is set to
As soon as a value other than No is selected, the Conditional Select "Position" should be displayed and required.
At first I thought that this is a simple task that I can solve by removing / adding the class
required-entry (on select) or
required (on label).
Even if I set the required classes, the validation is successful if you have not selected anything in the Position field and
'-- Please select --' is still selected. I need to force the user to select something though.
Why does the validation not fail even though the user did not selected anything?
I figured out that the validation is made serverside and we can't influence it from the client side.
How I figured it out
I changed the select from not required to required in the backend and tried to add the article to the cart with no selected option in the selectmenu. Since it is required now, it should give me an alert saying "Please specify the product required option(s).". And I actually got that alert, it was not possible to put the article in the cart, because it is required now.
Then I changed the select from required to not required again in the backend and tried again to add the article to the cart without reloading the frontend, and it worked. I was able to put it into the card.
So the validation script checks on the server which options are available in the product and then validates against the values send by the client.
My Idea is to add a class to the select which I have to change during runtime and make the validation script check for the class and then validate true or false. Any help is welcome.