jQuery针对Twitter Bootstrap按钮组的验证 [英] jQuery validation against twitter bootstrap button group

问题描述

我正在将Twitter Bootstrap用于我的UI，并试图在我的Web表单上使用jQuery验证.在某些形式上，我正在使用"btn-group"来提供输入，但是我正在努力在以下HTML上使用jQuery验证:

I'm using Twitter Bootstrap for my UI, and am trying to use jQuery validation on my webforms. On some forms, I'm using a "btn-group" to provide input, but I'm struggling on how to use jQuery validation on the following HTML:

<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"项目.

When a button is selected, the "active" class is appended to the chosen button, so that would be the "validation" Im looking for. I thought about using an approach similar to this: jQuery custom validation based on Class - where I would search for any "SaleTypeToggle" items that also have an "active" class, but don't know how to trigger such an event.

感谢您的帮助，谢谢！

推荐答案

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

I was faced with the same issue, and while it is true that you can't validate a button, I was able to find a workaround.

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

I've posted a JSFiddle with the full example: http://jsfiddle.net/geekman/W38RG/17/

我的解决方法如下:

• 每次单击按钮时，我都会使用一个隐藏元素和一些简单的jQuery来设置该隐藏字段的值(注意:，因为它已从divSaleType中删除了必需的属性，没有效果).

• I used a hidden element along with some simple jQuery to set the value of that hidden field each time a button was pressed (note: I removed the required attribute from divSaleType as it has no effect).

<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 属性添加到组中的每个按钮，这就是我将隐藏字段的值设置为的值.

I then set the hidden field as the required element. I also add the value attribute to each button in the group, this is what I will set the value of the hidden field to.

最后，我在jQuery validate插件中传递了一个选项，告诉它不忽略隐藏字段(这是默认设置).我只是传递了一个空数组来做到这一点.

Finally, I passed an option in to the jQuery validate plugin to tell it not to ignore hidden fields (which is the default). I simply passed an empty array to do this.

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

对我来说，这足以验证按钮组.此外，您现在还获得了附加的价值，即拥有一个HTML输入，该HTML输入在提交后便已过帐到您的网络服务器，而无论哪种方式，您都必须使用按钮组来进行处理.

For me, this sufficiently validates the button group. Additionally, you get the added value of now having a HTML input that is POST'd to your webserver on submission, which you would have had to handle somehow with the button group as well either way.

这篇关于jQuery针对Twitter Bootstrap按钮组的验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！