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

Question

可能通过这个 fiddle 最容易解释: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

显示/隐藏字段后，需要重新绑定(bind)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);
    }  
});