使用 JQuery 进行 HTML 选择元素验证答案

【问题标题】：HTML Select Element Validation with JQuery使用 JQuery 进行 HTML 选择元素验证
【发布时间】：2016-01-19 22:55:23
【问题描述】：

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

有没有办法使用例如执行验证？查询？还是使用标准的 HTML5 表单验证？

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

（我知道提交按钮应该在表单元素内，应该是按钮或输入，但它是使用 Joomla 的 Ecommerce 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>

【问题讨论】：

试试parsleyjs.org
Recommendation for javascript form validation library的可能重复
它不是任何东西的复制品，你显然没有彻底检查过代码。由于默认的 onclick 值，它非常具体，我无法让任何标准验证方法正常工作，同时仍然能够将用户重定向到结帐过程。请删除重复标记。

标签： php jquery html forms joomla

【解决方案1】：

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

库：jQuery Form Validate

规则：Create Rule

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

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

【讨论】：

感谢您的帮助。

【解决方案2】：

parsley 是一个不错的用于表单验证的 JavaScript 库。 here 是表单的文档，注意 built-in validators 包括 html5 的 required 属性。

【讨论】：