4

我将 Twitter Bootstrap 用于我的 UI，并尝试在我的网络表单上使用 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 自定义验证- 我将在其中搜索任何也具有“活动”类但不知道如何触发此类事件的“SaleTypeToggle”项目。

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

4

2 回答 2

3

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

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

我的解决方案如下：

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

    <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 验证插件传递了一个选项，告诉它不要忽略隐藏字段（这是默认设置）。我只是传递了一个空数组来执行此操作。

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

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

于 2013-10-07T17:21:25.430 回答
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属性，并且还必须包含在一组<form></form>标签中，以便 jQuery Validate 插件运行。

于 2013-08-19T23:30:52.830 回答