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>
I haven't tried parsley, but it looks good. Another option is jQuery form validate with custom rule, as in this answer.
Lib: jQuery Form Validate
Rule: Create Rule
Another very simple way would disable the submit button until the selector has been clicked twice. That wouldn't be 100%, because they could just double-click, but it would cover a large percentage.
Another option would be to use event.preventDefault() on submit, check the value yourself and then either submit or popup warning.
parsley is a nice javascript library for form validation. here is the documentation for forms, note the built-in validators including the html5 required
attribute.