Conditional field validation with ParsleyJs

In more complex forms it can be useful to validate one or more fields based on what the user selected on another field. For instance, make field A mandatory when the option X is selected and make the field B mandatory when the option Y is selected.

In order to use this conditional validation I’ll use ParsleyJs with Javascript.

Last start with a simple example, in a form with 4 fields. The first will be our control field and the other three will be text fields.

<form id="test_form">
   Control Field:
       <input type="radio" id="control_field_1" name="control_field" value="first_option" required checked />
           <label for="control_field_1">First Option</label>
       <input type="radio" id="control_field_2" name="control_field" value="second_option" required>
           <label for="control_field_2" />Second Option</label>
   <br><br />

   Field 1 (required only for the "First Option"): <input type="text" name="field_1" required /> 
   <br />
   Field 2 (required only for the "Second Option"): <input type="text" name="field_2"/> 
   <br />
   Field 3 (required for all options): <input type="text" name="field_3" required/>
   <input type="submit" value="Submit form"></input>
</form>

Whenever the user selects the “First Option” we’ll set Field 1 and Field 3 as mandatory fields. In turn, when “Second Option” is selected, we’ll set the fields Field 2 and Field 3 as mandatory.

This way the mandatory fields will be changed based on a previous user choice - what I’m calling the Control Field.

First, we’ll instantiate ParsleyJs in our form with $(“form”).parsley();. After Parsley is bound to the form we need to create some javascript code to verify if the user changes the selected option of the control field and based on that update the required fields appropriately, either by adding the required attribute or by removing it.

So we’ll use the jQuery method .on(‘change’, function() {..}) that allows us to control selection changes on the control field and we’ll write the rest of the code inside that method. We’ll use .attr(“required”, “required”) to make a field required and .removeAttr(“required”) to remove the mandatory field.

$("form").parsley();

$("[name=control_field]").on('change', function () {
    // Which option was welected?
    var val = $(this).val();

    switch (val) {
        // If the user selected the first option
        case 'first_option':
            // Set the required attr on the field_1
            $("[name=field_1]").attr("required", "required");
            // and remove the required attr on field_2
            $("[name=field_2]").removeAttr("required");
            break;
        // If the second option was selected
        case 'second_option':
            // Invert what we did for the first option
            $("[name=field_1]").removeAttr("required");
            $("[name=field_2]").attr("required", "required");
            break;
    }
    
    // Beware: We need to reset Parsley's instance, otherwise
    // these changes won't take effect
    $("form").parsley().reset();
});

As you can see, it isn’t enough to change the required attributes for Parsley to assume these new rules. Anytime you change a validation rule (be it a mandatory field or some other type - like a regex expression) you need to reset Parsley’s instance of the form by using:

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

And there you go! A demo is below and if you want to know more about Parsley just click on the “parsleyjs” tag at the bottom of the article.

See the Pen Conditional validation with Parsley Js by Luís Cruz (@milz) on CodePen.