HTML Select Element Validation with JQuery

Question

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>

Possible duplicate of Recommendation for javascript form validation library — Charlie
– Charlie, Commented Jan 19, 2016 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
– J. Doe, Commented Jan 20, 2016 at 0:16

Community · Accepted Answer · 2017-05-23 12:15:18Z

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.

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jan 19, 2016 at 23:09

Sundance.101

4493 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J. Doe Over a year ago

Thank you for your help.

bryce · Accepted Answer · 2016-01-19 22:58:09Z

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.

answered Jan 19, 2016 at 22:58

bryce

3,0531 gold badge17 silver badges19 bronze badges

Collectives™ on Stack Overflow

HTML Select Element Validation with JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related