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 属性，你的小提琴就可以工作了。这是an example 错误显示无法正常工作，不知道为什么。

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

这些错误已在 2.0.6 中修复。

不过，还有另一种方式来看待这个问题。您可以简单地排除隐藏输入，而不是更改字段的 required 属性：

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

完成fiddle here。在这个例子中，错误消息不会显示，我不知道为什么（我昨天才开始认真查看parlsey）。