Question

我的网站上有一个带有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是一个很好的javascript库，用于表单验证。 here是表单的文档，请注意built-in validators，包括html5 ax.plot(t_points,y,'ro',color='red',label='1',linewidth=2, markersize=10)属性。

Answer 2

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

Lib：jQuery Form Validate

规则：Create Rule

另一种非常简单的方法是禁用提交按钮，直到选择器被单击两次。这不会是100％，因为它们只能双击，但它会占很大比例。

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

HTML使用JQuery选择元素验证

2 个答案: