如何让Parsley.js为一组单选按钮或复选框输出1个错误？ [英] How can I get Parsley.js to oupt 1 error for a group of radio buttons or checkboxes?

问题描述

似乎ParsleyJS输出输入组中每个输入的错误。使用ParsleyJS 2.x，我如何使用可用功能进行检查以确保选中组中至少1个复选框，并且仅在整个复选框组中显示1个错误如果不是？

It seems like ParsleyJS outputs an error for each input in an input group. With ParsleyJS 2.x, how can I use the available features to check to make sure a minimum of 1 checkbox in a group is checked and only show 1 error under the entire group of checkboxes if not?

推荐答案

好的，经过一些试验和错误，我有这个工作。如果您要验证组中的至少一个复选框，并且只想显示一组复选框或单选按钮的单个错误，请执行以下操作：

Ok, after some trial and error, I have this working. If you are validating for at least one checkbox in a group and only want to show a single error for a group of checkboxes or radio buttons, just do the following:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_group" data-parsley-mincheck="1" required> The Label</label>

这是如何以最基本的形式完成的。为此，name属性需要为组中的每个项目具有相同的值。如果由于某种原因您无法控制name属性，可以使用data-parsley-multiple =some_group_name_here属性来定义它，如下所示：

That's how to do it in its most basic form. For this to work, the name attribute needs to have the same value for each item in the group. If for some reason you don't have control over the name attribute, you can define it with the data-parsley-multiple="some_group_name_here" attribute, like so:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" required> The Label</label>

同样，你不需要data-parsley-multiple =my_input_group属性每个输入，只要组中的每个项目具有相同的名称属性。我将继续将其包含在以下示例中。

Again, you do not need the data-parsley-multiple="my_input_group" attribute on each input as long as each item in the group has the same name attribute. I will, however continue to include it in the following examples.

两个示例上面会在最后一个复选框下方放置一个错误，上面写着：此值是必需的。如果要更改组的错误消息，我们将使用 last 复选框输入中的data-parsley-error-message属性，如下所示：

Both examples above will place an error below your last checkbox which says: "This value is required." If you want to change the error message for the group, we would use the data-parsley-error-message attribute in the last checkbox input, like this:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" data-parsley-error-message="Please choose at least 1" required> The Label</label>

最后，如果你想得到一点花哨并控制你的错误信息显示在哪里，你可以使用类或id创建一个空容器，并再次将正确的欧芹属性添加到 last 复选框或单选按钮，并引用空容器类或id。

And, finally, if you want to get a little fancy and control where your error message displays, you can create an empty container with a class or an id, and again add the right parsley attributes to the last checkbox or radio button with a reference to the empty container class or id.

在最顶层，我添加了一个带有my_error_container类的空div。看看我如何从最后一个复选框中引用它？

At the very top I've added an empty div with a class of "my_error_container". See how I reference it from the last checkbox?

<div class="my_error_container"></div>
<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" data-parsley-error-message="Please choose at least 1" data-parsley-errors-container=".my_error_container" data-parsley-class-handler=".my_error_container" required> The Label</label>

希望这有助于其他人。

请记住，只要组中的每个项目具有相同的名称属性，就不需要每个输入上的data-parsley-multiple =my_input_group属性。

And remember, you do not need the data-parsley-multiple="my_input_group" attribute on each input as long as each item in the group has the same name attribute.

这篇关于如何让Parsley.js为一组单选按钮或复选框输出1个错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！