0

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&amp;controller=checkout&amp;task=quick_checkout"
  onclick="wdShop_onBtnBuyNowClick(event, this); return false;">Buy now</a>
J. Doe
  • 3
  • 2
  • try http://parsleyjs.org/ – bryce Jan 19 '16 at 22:56
  • Possible duplicate of [Recommendation for javascript form validation library](http://stackoverflow.com/questions/17817/recommendation-for-javascript-form-validation-library) – Charlie Jan 19 '16 at 23:46
  • It's not a duplicate of anything, you clearly haven't inspected the code thoroughly. It is very specific because of the default onclick value, I can't get any standard validation methods working while still being able to redirect the user to the checkout process. Please remove the duplicate mark. – J. Doe Jan 20 '16 at 00:16

2 Answers2

0

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.

bryce
  • 3,022
  • 1
  • 15
  • 19
0

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.

Community
  • 1
  • 1
Sundance.101
  • 404
  • 3
  • 10