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属性，那么您的小提琴将起作用。这里an example错误显示不能正常工作，但不确定原因。

您的问题说明a bug删除了必填字段。它还说明another bug删除了所有约束（这也带来了一些flawed tests。

这些错误在2.0.6中已修复。

但是还有另一种方法来看待这个问题。您可以简单地排除隐藏的输入：

，而不是更改字段的required属性

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

完成fiddle here。在这个例子中，错误消息不会显示，但我不确定为什么（我昨天开始认真考虑parlsey）。

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

2 个答案: