Question

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

Answer 1

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

<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”属性来定义它，如下所示：

<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”属性。我会继续将它包含在以下示例中。

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

<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 < / strong>复选框或单选按钮，引用空容器类或id。

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

<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”属性。

如何让Parsley.js为一组单选按钮或复选框输出1个错误？

1 个答案: