针对twitter bootstrap按钮组的jQuery验证

发布时间：2020-12-17 21:27:47 所属栏目：安全来源：网络整理

导读：我正在为我的UI使用Twitter Bootstrap,我正在尝试在我的webforms上使用jQuery验证.在某些形式上,我使用“btn-group”来提供输入,但我正在努力如何在以下 HTML上使用jQuery验证： div class="btn-group" id="divSaleType" data-toggle="buttons-radio" requir

我正在为我的UI使用Twitter Bootstrap,我正在尝试在我的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”项目,这些项目也有“活动”类,但不知道如何触发这样的事件.

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

解决方法

我遇到了同样的问题,虽然你无法验证按钮,但我找到了一个解决方法.

我发布了一个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插件,告诉它不要忽略隐藏字段(which is the default).我只是通过一个空数组来做到这一点.

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

对我来说,这足以验证按钮组.此外,您还可以获得现在有一个HTML输入的附加值,该输入在提交时会对您的Web服务器进行POST操作,无论如何,您都必须以某种方式处理按钮组.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!