Parsley.js validate parts of form based on selected radio button

Question

Probably most easily explained via this fiddle: http://jsfiddle.net/shanomurphy/dL688o9j/

I want to show/hide parts of a form based on what radio button is selected. When a radio button is checked I show some extra form fields and hide others. I only want Parsley.js to validate the shown fields.

I'm running into problems when the selected radio button is changed and parsley validation has already been run.

 // 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

After showing / hiding the fields, you need to re-bind Parlsey.

Something like this:

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

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

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

Alternatively, you can destroy the ParsleyField object for the fields you hide and create a ParsleyField object for the fields that are displayed, like this:

$("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

Interesting example and great fiddle.

Now that 2.0.6 is released, your fiddle would work if you also changed the data-parsley-mincheck attribute accordingly. Here's an example The error display isn't working properly though, not sure why.

Your question illustrated a bug with removing a required field. It also illustrated another bug with removing all constraints (which brought up some flawed tests too).

These bugs are fixed in 2.0.6.

There is another way to look at the issue though. Instead of changing the required attributes of your fields, you could simple exclude hidden inputs:

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

Complete fiddle here . In this example, the error messages won't show though, I'm not sure why (I just started looking seriously at parlsey yesterday).