HTML Select 使用 JQuery 进行元素验证

Question

我的网站上有一个包含 select 元素的表单，我想将其设为必需。该表单包括产品的 select 可用参数和“立即购买”按钮。我尝试在 select 元素上使用 required 属性，但仍然可以在不选择选项的情况下提交表单。我的猜测是锚标记上的默认 onclick 值是导致冲突的原因。

有什么方法可以使用例如JQuery？或者使用标准的 HTML5 表单验证？

您可以在下面看到表格的基本结构。另外，这是一个活生生的例子：http://www.picassinodesign.com/rendelheto-termekek/lancok/products/display/rasztasal

（我知道提交按钮应该在表单元素内部，它应该是一个按钮或输入，但它是用 Joomla 的电子商务 WD 组件制作的。）

<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>

Answer 1

parsley is a nice javascript library for form validation. here is the documentation for forms, note the built-in validators 包括 html5 required 属性。

Answer 2

我没试过欧芹，但看起来不错。另一种选择是 jQuery 使用自定义规则进行表单验证，如本答案所示。

库：jQuery Form Validate

规则：Create Rule

另一种非常简单的方法是禁用提交按钮，直到选择器被点击两次。那不会是 100%，因为他们可以 double-click，但它会覆盖很大一部分。

另一种选择是在提交时使用 event.preventDefault()，自行检查值，然后提交或弹出警告。

HTML Select 使用 JQuery 进行元素验证

HTML Select Element Validation with JQuery

html

php

forms

jquery

joomla