Bootstrap无线电组jquery验证

Question

我已经四处寻找，但无法找到答案，我是如何使用jquery验证检查其中一个按钮必须在提交前在引导单选按钮组中选择的。

我将此作为表单的一部分，

<div id="inputNumDel" name="inputNumDel" class="btn-group" data-toggle="buttons-radio">
        <button type="button" id="num7"  class="btn ">7</button>
        <button type="button" id="num8"  class="btn ">8</button>
</div>

给出了这个

这是验证码无效

$(document).ready(function(){

            $("#form").validate({
                rules:{                     
                    inputNumDel:{
                            required:true,
                    },

            },          
            errorClass: "help-block"
            });

     });

Answer 1

我必须解决同样的问题，并在类似的问题上发布我的解决方法，在这里：

jQuery validation against twitter bootstrap button group

虽然您无法验证按钮本身（或实际上是按钮组div），但您可以使用按钮将其值存储在隐藏字段中，然后验证隐藏字段。

以下是我为上述链接答案做出的一个工作示例：http://jsfiddle.net/geekman/W38RG/18/

基本上，您要执行以下操作：

• 在btn-group DIV下方添加隐藏字段。在btn-group中的按钮上使用click事件，并根据按钮将隐藏字段的值设置为某个相应的值。

• 然后使用jQuery validate再次验证隐藏字段而不是您的按钮组。

• 使用不选项忽略隐藏字段，调用validate()。

类似于：

<div id="inputNumDel" name="inputNumDel" class="btn-group" data-toggle="buttons-radio">
    <button type="button" id="num7" value="7"class="btn ">7</button>
    <button type="button" id="num8" value="8" class="btn ">8</button>
</div>
<!-- Notice here that I have marked the hidden field as required, so jQuery validate should recognise it as required, allowing you to leave out your required rule -->
<input required type="hidden" id="inputNum" required="required" />

<script type="text/javascript">
$(document).ready(function () {
    //Bind the click event to the parent div containing both buttons. Tell it to fire on any element containing the class btn.
    $('#inputNumDel').on('click', '.btn', function () {
        $('#inputNum').val($(this).val());
    });

    $('#form').validate({
        ignore: [],
        errorClass: "help-block"
    });
});
</script>

Answer 2

您不能使用jquery validate来使按钮元素“必需”。

您需要一个复选框或单选按钮或其他输入元素。 jQuery mobile有一个具有类似效果的checkboxradio小部件，但使用单选按钮或复选框。