Parsley.js根据选定的单选按钮验证表单的各个部分

Question

通过此提琴可能最容易解释： http : //jsfiddle.net/shanomurphy/dL688o9j/

我想根据选择的单选按钮显示/隐藏表单的各个部分。 选中单选按钮后，我会显示一些额外的表单字段并隐藏其他字段。 我只希望Parsley.js验证显示的字段。

更改选定的单选按钮并且已经运行香菜验证时，我遇到了问题。

 // Vars var drinks_fields = $('#drinks'); var food_fields = $('#food'); // Hide fields until needed drinks_fields.hide(); food_fields.hide(); $("input[name=choice]").on('click', function() { if ( $(this).val() == 'Drinks' ) { // Show drinks hide food drinks_fields.show(); food_fields.hide(); // Update required $("input[name=drinks]").prop('required',true); $("input[name=food]").prop('required',false); } else if ( $(this).val() == 'Food' ) { // Show food hide drinks food_fields.show(); drinks_fields.hide(); // Update required $("input[name=food]").prop('required',true); $("input[name=drinks]").prop('required',false); } }); 

 <form data-parsley-validate="true"> <fieldset> <legend>Choice</legend> <input type="radio" name="choice" value="Drinks" required data-parsley-error-message="Choose drinks or food"/>Drinks <input type="radio" name="choice" value="Food"/>Food </fieldset> <fieldset id="drinks"> <legend>Drinks</legend> <input type="checkbox" name="drinks" data-parsley-mincheck="2" data-parsley-trigger="change" data-parsley-error-message="Choose min 2 drinks"/>Water <input type="checkbox" name="drinks"/>Pepsi <input type="checkbox" name="drinks"/>Orange Juice </fieldset> <fieldset id="food"> <legend>Food</legend> <input type="checkbox" name="food" data-parsley-mincheck="2" data-parsley-trigger="change" data-parsley-error-message="Choose min 2 foods"/>Cake <input type="checkbox" name="food"/>Hotdog <input type="checkbox" name="food"/>Pizza </fieldset> <button type="submit">submit</button> </form> 

Answer 1

显示/隐藏字段后，您需要重新绑定Parlsey。

像这样：

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // your code
    } else if ( $(this).val() == 'Food' ) {
        // your code
    }

    $("form").parsley().destroy();

    $("form").parsley();
});

另外，您可以销毁隐藏字段的ParsleyField对象，并为显示的字段创建ParsleyField对象，如下所示：

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // Show drinks hide food
        drinks_fields.show();
        drinks_fields.parsley();
        food_fields.hide();
        food_fields.parsley().destroy();
        // Update required
        $("input[name=drinks]").prop('required',true);
        $("input[name=food]").prop('required',false);
    } else if ( $(this).val() == 'Food' ) {
        // Show food hide drinks
        food_fields.show();
        food_fields.parsley();
        drinks_fields.hide();
        drinks_fields.parsley().destroy();
        // Update required
        $("input[name=food]").prop('required',true);
        $("input[name=drinks]").prop('required',false);
    }  
});

Answer 2

有趣的例子和伟大的小提琴。

现在2.0.6已发布，如果您还相应地更改了data-parsley-mincheck属性，您的提琴将起作用。 这是一个示例错误显示虽然不能正常工作，但不知道为什么。

您的问题说明了删除必填字段的错误 。 它还说明了删除所有约束的另一个错误 （也带来了一些有缺陷的 测试 ）。

这些错误已在2.0.6中修复。

不过，还有另一种方法可以解决这个问题。 无需更改字段的required属性，您可以简单地排除隐藏的输入：

jQuery("form").parsley({ excluded: ":hidden" });

在这里完成小提琴 。 在此示例中，错误消息不会显示，但我不确定为什么（昨天我才开始认真看parlsey ）。