HTML Выберите элемент проверки с помощью JQuery

Question

У меня есть форма на моем сайте с элементом select, который я хотел бы сделать необходимым. Форма включает в себя выбираемые параметры для продукта и кнопку «Купить». Я попытался использовать атрибут required в элементе select, но форма все равно может быть отправлена ​​без выбора опции. Я предполагаю, что значение по умолчанию onclick в теге anchor является причиной конфликта.

Есть ли способ выполнить проверку с использованием, например, JQuery? Или со стандартной проверкой формы HTML5?

Вы можете увидеть основную структуру приведенной ниже формы. Кроме того, вот живой пример: http://www.picassinodesign.com/rendelheto-termekek/lancok/products/display/rasztasal

(Я знаю, что кнопка отправки должна быть внутри элемента формы, и это должна быть кнопка или вход, но она выполнена с компонентом WD для электронной торговли для 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> 

Answer 1

Я не пробовал петрушку, но она выглядит хорошо. Другой вариант - это форма jQuery для проверки с помощью настраиваемого правила, как в этом ответе.

Lib: jQuery Form Validate

Правило: Create Rule

Еще один очень простой способ отключит кнопку отправки, пока селектор не была нажата дважды. Это не будет на 100%, потому что они могут просто дважды щелкнуть, но это будет охватывать большой процент.

Другой вариант - использовать event.preventDefault() для отправки, проверить значение самостоятельно, а затем отправить или всплывающее предупреждение.

Answer 2

parsley хорошая библиотека Javascript для проверки формы. here - это документация для форм, обратите внимание на built-in validators, включая атрибут html5 required.