Question

我正在使用Twitter Bootstrap作为我的UI，并且我正在尝试在我的webforms上使用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>

当选择一个按钮时，“活动”类将附加到所选按钮，这将是我正在寻找的“验证”。我想过使用类似这样的方法：jQuery custom validation based on Class - 在那里我会搜索任何“SaleTypeToggle”项目，这些项目也有“活动”类，但不知道如何触发这样的事件。

感谢任何帮助，谢谢！

Answer 1

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

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

我的解决方案如下：

我使用隐藏元素和一些简单的jQuery来设置每次按下按钮时该隐藏字段的值（注意：我从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 validate插件，告诉它 not 忽略隐藏字段（which is the default）。我只是通过一个空数组来做到这一点。
```
$('#sales-form').validate({
    ignore: []
});
```

对我来说，这足以验证按钮组。此外，您还可以获得现在具有HTML输入的附加值，该输入在提交时将POST输出到您的Web服务器，无论如何，您都必须以某种方式处理按钮组。

Answer 2

jQuery Validate插件仅用于验证使用表单的输入元素输入的数据。 <button></button>元素不是数据输入元素...它用于触发操作，因此它不是任何表单验证的一部分。

换句话说，此插件仅验证使用这些元素输入的用户数据......

<!-- single line text input, example... -->
<input type="text" />

<!-- radio select -->
<input type="radio" />

<!-- checkbox select -->
<input type="checkbox" />

<!-- pulldown/menu select -->
<select>
    <option></option>
</select>

<!-- multi-line text input -->
<textarea></textarea>

他们必须每个都包含一个唯一的name属性，并且必须包含在jQuery Validate插件的一组<form></form>标记中操作

针对twitter bootstrap按钮组的jQuery验证

2 个答案: