欧芹复选框验证：无法正常工作答案

【问题标题】：Parsley checkbox validate: can't get working欧芹复选框验证：无法正常工作
【发布时间】：2014-10-04 21:21:42
【问题描述】：

下面是我所拥有的，试图在这里使用类似答案中的位，以及来自欧芹网站的项目。没有任何反应。用户没有收到至少必须选中 1 个框的警报。我错了吗？提前感谢您提供任何线索！

<form action="success.html" id="contact-form" data-parsley-validate>
  <label for="language">Please Choose your Language:<br>
  <input type="checkbox" class="checkbox" name="language" value="english" parsley-group="language" parsley-mincheck="1">English<br>
  <input type="checkbox" class="checkbox"  name="language" value="spanish" parsley-group="language" >Spanish<br>
  <input type="checkbox" class="checkbox"  name="language" value="french" parsley-group="language" >French 
</label>

【问题讨论】：

请添加 javascript 标签，以便为您的问题和以下答案提供语法突出显示。谢谢。

标签： forms validation checkbox parsley.js

【解决方案1】：

您的代码有一些问题：

parsley-group 不存在。有一个 data-parsley-group，如果您想验证表单的一部分，则适用。
parsley-mincheck="1" 不存在。有一个data-parsley-mincheck="1"。

假设您至少需要一种语言，但可以接受更多，那么这段代码应该可以解决问题：

<form action="success.html" id="contact-form" data-parsley-validate>
    <label for="language">Please Choose your Language:<br>
    <input type="checkbox" class="checkbox" name="language[]" 
            value="english" required>English<br>
    <input type="checkbox" class="checkbox"  name="language[]" 
            value="spanish" required>Spanish<br>
    <input type="checkbox" class="checkbox"  name="language[]" 
            value="french" required >French</label>
    <button type="submit" id="submit-button">Submit form</button>
</form>

$(document).ready(function() {
    // bind parsley to the form
    $("#contact-form").parsley();

    // on form submit, validate form and, if valid, show valid in the console
    $("#contact-form").submit(function() {
        $(this).parsley("validate");
        if ($(this).parsley("isValid")) {
            console.log('valid');
        }
        event.preventDefault();
    });
});

如果您希望用户选择一个且只有一个选项，我建议您使用单选按钮。

【讨论】：