Validação condicional de campos com o ParsleyJs

Em formulários mais complexos pode ser necessário validar um ou mais campos com base nas opções de um outro campo. Por exemplo, tornar o campo A obrigatório quando a opção X está selecionada e tornar o campo B obrigatório quando a opção Y está selecionada.

Para fazermos este tipo de validação condicional podemos usar o ParsleyJs em conjunto com Javascript.

Vamos começar por um exemplo simples, num formulário que tem quatro campos, o primeiro que é o campo de controlo e os restantes campos de texto.

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

Neste formulário, quando for selecionada o radio “First Option” vamos definir o Field 1 e o Field 3 como campos obrigatórios. E, quando selecionarmos o radio “Second Option” vamos colocar os campos Field 2 e Field 3 obrigatórios.

Desta forma, os campos obrigatórios vão ser alterados mediante a opção que for selecionada no Control Field.

Primeiro temos de instanciar o ParsleyJs para o nosso formulário com $(“form”).parsley();. Depois de termos o Parsley “ligado” ao formulário, temos de criar algum código para verificar qual a opção que o utilizador seleciona e, de acordo com essa opção, tornar os campos obrigatórios ou remover a obrigatoriedade.

Para isto vamos usar o método .on(‘change’, function() {..}) do jQuery que nos permite detetar uma mudança de seleção do campo de controlo e colocaremos todo o código aí. Este código passa por verificar qual a opção selecionada e usar .attr(“required”, “required”) para tornar um campo obrigatório e .removeAttr(“required”) para remover o atributo.

$("form").parsley();

$("[name=control_field]").on('change', function () {
    // Qual foi a opção selecionada?
    var val = $(this).val();

    switch (val) {
        // Se o utilizador selecionou o "first_option"
        case 'first_option':
            // Adicionar o atributo required no field_1
            $("[name=field_1]").attr("required", "required");
            // e remover o atributo required no field_2
            $("[name=field_2]").removeAttr("required");
            break;
        // Se foi o "second_option" selecionado
        case 'second_option':
            // Invertemos o que fizemos para o "first_option"
            $("[name=field_1]").removeAttr("required");
            $("[name=field_2]").attr("required", "required");
            break;
    }
    
    // Reset ao formulário, para que seja aplicada a validação
    // com os atributos revistos. 
    $("form").parsley().reset();
});

Como se pode ver acima, não basta alterar os atributos required para que o Parsley passe a validar os campos de acordo com as novas definições. Sempre que alteres alguma regra de validação, como aqui estamos a fazer, tens de fazer reset à instância do Parlsey para este formulário através de:

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

E já está! Podes ver a demonstração abaixo. Se quiseres saber mais sobre o Parsley basta clicares na tag “parsleyjs”, no final do artigo.

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