针对 twitter bootstrap 按钮组的 jQuery 验证

我正在为我的 UI 使用 Twitter Bootstrap，并尝试在我的 Web 表单上使用 jQuery 验证。在某些表单上，我使用“btn-group”来提供输入，但我正在努力解决如何在以下 HTML 上使用 jQuery 验证：

<div class="btn-group" id="divSaleType" data-toggle="buttons-radio" required="required" name="divSaleType">
   <button name="New" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnNew" type="button">New</button>
   <button name="Used" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnUsed" type="button">Used</button>
</div>

当选择按钮时，“活动”类将附加到所选按钮，因此这将是我正在寻找的“验证”。我考虑过使用类似的方法：基于Class的jQuery自定义验证- 我将在其中搜索任何也具有“活动”类的“SaleTypeToggle”项目，但不知道如何触发此类事件。

任何帮助表示赞赏，谢谢！

我遇到了同样的问题，虽然确实无法验证按钮，但我找到了解决方法。

我已经发布了带有完整示例的 JSFiddle：http://jsfiddle.net/geekman/W38RG/17/

我的解决方案如下：

• 我使用隐藏元素和一些简单的 jQuery 来在每次按下按钮时设置该隐藏字段的值（note:我从 divSaleType 中删除了必需的属性，因为它没有效果）。

  <div class="btn-group" id="divSaleType" data-toggle="buttons-radio" name="divSaleType">
      <button name="New" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnNew" type="button" value="new">New</button>
      <button name="Used" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnUsed" type="button" value="used">Used</button>
  </div>
  <input required type="hidden" name="SaleType" id="SaleType" />
  
  <script type="text/javascript">
      //Bind the click event to the parent div containing both buttons. Tell it to fire on any element containing the class btn.
      $('#divSaleType').on('click', '.btn', function () {
          $('#SaleType').val($(this).val());
      });
  </script>
  

• 然后我将隐藏字段设置为必需元素。我还添加了value组中每个按钮的属性，这就是我将隐藏字段的值设置为的值。

• 最后，我向 jQuery 验证插件传递了一个选项来告诉它not忽略隐藏字段（这是默认的）。我只是传递一个空数组来执行此操作。

  $('#sales-form').validate({
      ignore: []
  });
  

对我来说，这足以验证按钮组的有效性。此外，您现在还可以获得一个 HTML 输入的附加值，该输入在提交时会 POST 到您的网络服务器，无论哪种方式，您都必须使用按钮组以某种方式处理该输入。