【问题标题】:Validating multiple checkboxes using jQuery validation使用 jQuery 验证验证多个复选框
【发布时间】:2013-02-19 20:11:14
【问题描述】:

我正在尝试使用多个复选框,并确保使用 jQuery 验证检查这些复选框中的至少一个。到目前为止,我还没有运气。我错过了什么?我知道我的验证在那里,因为它适用于其他字段,但不适用于我的复选框。我把代码放在jfiddle,也许这会有所帮助。

编辑:我为输入 name=list 参数 (list[]) 添加了括号。同样在我的规则中,我将名称参数从列表更改为“列表 []”。我的旧代码如下。谢谢 Sparky!

OLD: <input type='checkbox' name='list' id='fullProduct'></input>

FIXED: <input type='checkbox' name='list[]' id='fullProduct'></input>

这是我的代码。

$("#tradeForm").validate({
        rules: {
            startDate: {
                required: true,
                date: true
            },
            endDate: {
                required: true,
                date: true
            },
            showName: {
                required: true,
                minlength: 5
            },
            location: {
                required: true
            },
            list: {
                required: true
            }
        },
        messages: {
            startDate: "*",
            endDate: "*"
    }
});

                <table>
                <tr>
                    <th>Name of Show</th>
                    <td> <input type='text' name='showName'></input></td>
                </tr>
                <tr>
                    <th>Location</th>
                    <td><input type='text' name='location'></input></td>
                </tr>
                <tr>
                    <th><span style='padding-right: 50px;'>Select Literature</span></th>
                    <td><input type='checkbox' name='list' id='fullProduct'></input><span style='font-size: 12px;'>Guide One</span></td>
                    <td><input type='checkbox' name='list' id='oilProduct'></input><span style='font-size: 12px;'>Guide Two</span></td>
                </tr>                               
                <tr>                                
                    <td></td>                       
                    <td><input type='checkbox' name='list' id='diamondProduct'></input><span style='font-size: 12px;'>Guide Three</span></td>
                    <td><input type='checkbox' name='list' id='motorProduct'></input><span style='font-size: 12px;'>Guide Four</span></td>
                </tr>                               
            </table>

【问题讨论】:

  • 你OP里的HTML代码和你jsFiddle里的代码不一样,这也是你问题的原因。 name="list[]"name="list" 不同。

标签: jquery jquery-validate


【解决方案1】:

您的复选框组的namelist[],而不是list,因此您必须这样声明规则。 Since it contains brackets, [], you must enclose it in quotes:

rules: {
    'list[]': {
        required: true
    }
},

你的 jsFiddle:http://jsfiddle.net/ZDz59/1/

【讨论】:

  • 如果您的表单包含使用不合法 JavaScript 标识符的名称的字段,则在使用规则选项时必须引用这些名称:这就是您所指的吗?
  • @wowzuzz,是的,我指的是这个:docs.jquery.com/Plugins/Validation/…
  • 要更改验证标签的位置,请看这里:stackoverflow.com/questions/13200659/… Fiddle:jsfiddle.net/ZDz59/81
  • @user2345998,你的评论和这里有什么关系?问题是关于不正确声明的规则,而不是消息放置。请保持 cmets 的相关性。谢谢。
  • 我阅读答案后的第一个问题是“如何更改位置”,我认为分享解决方案的直接链接很好。当然,如果您坚持,我可以删除它。
【解决方案2】:

如果您只想始终选中其中一个复选框,请改用 input type="radio"

如果不是:尝试将复选框的名称属性更改为 list[]。由于可以有多个检查值,因此它必须包含括号以指示它是一个数组。否则该值将被覆盖。

【讨论】:

  • 我将名称更改为 list[] 并且没有运气。它只是提交给我的表单操作。它正在验证我的其他字段。
  • 尝试将minlength: 1 添加到列表规则中。
  • 您可以添加一个点击功能来取消选中除您刚刚点击的那个框之外的每个框
猜你喜欢
  • 1970-01-01
  • 2012-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多