I have a form on my website with a select
element, which I would like to make required. The form includes selectable parameters for a product and a Buy Now button. I tried to use the required
attribute on the select element, but the form can still be submitted without choosing an option. My guess is that the default onclick value on the anchor tag is what causes the conflict.
Is there any way to perform the validation using e.g. JQuery? Or with the standard HTML5 form validation?
You can see the basic structure of the form below. Also, here is a live example: http://www.picassinodesign.com/rendelheto-termekek/lancok/products/display/rasztasal
(I know that the submit button should be inside the form element, and it should be a button or an input, but it is made with the Ecommerce WD component for Joomla.)
<form name="wd_shop_form_order" action="" method="POST">
<label for="wd_shop_selectable_parameter_Color">Color:</label>
<select required id="color" name="color" onchange="onSelectableParameterChange(this, event)">
<option value="">- Select -</option>
<option value="Color 1">Color 1</option>
<option value="Color 2">Color 2</option>
</select>
</form>
<a href="http://www.picassinodesign.com/index.php?option=com_ecommercewd&controller=checkout&task=quick_checkout"
onclick="wdShop_onBtnBuyNowClick(event, this); return false;">Buy now</a>