Validate set of fields only if radio button is checked (conditional validation)

Question

I have a form with two sets of fields:

• "Contact information" (17 fields)
• "Company information" (5 fields)

There is a radio with the question "Do you have a company?" that is related to the company information. If the radio is "Yes", the company fields must be filled and validated. If the radio is "No", the company fields should be ignored.

I'm not sure about the best way to manage this problem.

1. By switching the attribute disabled of the company fields according to the state of the radio button and excluding all the disabled fields in the parsley option

   $('#adminForm').parsley({excluded: '[disabled]'});
   

2. With two data-parsley-group and a validation of one or two blocks according to the state of the radio button

I'm trying to do it with an example on jsfiddle (but without success).

Continuator

Answer 1

Parsley documentation states the following about data-parsley-group

Assign a group to a field for specific group validation. eg: data-parsley-group="signup". This way, you could only validate a portion of a form and not all the fields. Can be multiple. eg: data-parsley-group='["foo", "bar"]'

One could think that you could use data-parsley-group to validate only a portion of the form and, after validation, the form would submit. This is not correct.

data-parsley-group is intended to be used in multi-step forms, where the entire form must be validated, and validation is applied to one or few groups at a time. The form is submitted once all groups are validated.

What you need is:

1. If company is not checked: Validate only the first fields and ignore company fields.
2. If company is checked: Validate all form fields.

So, the form is the same but sometimes the form has more fields. I suggest you would use disabled to address the issue. When company is checked, show the fields, otherwise hide the fields and make them disabled.

When binding parsley to the form, add the :disabled to the excluded option so Parsley can ignore this fields.

I have updated the JSFiddle to meet your needs.

Piedadpiedmont

Thanks Milz for your answer but I did not check correctly your code. There is still something wrong : If you answer "No" to the question "Do you have a company?" and then you fill the fields "Your Name" and "Your Email". You can't submit the form because parsley is still waiting for the hidden fields "Company Name" and "company phone" – Continuator

Nice catch. I forgot to add :checked in the condition $("input[name=company]").val(). Since there are two inputs with name=company, it was always retrieving the last value. I've fixed the issue and updated the fiddle. – Neva

This code works perfectly except when i try to combine this mechanism with the sending of a form... see my new post (#26044726) The alert message are displayed so the conditionnal test are fine but the form is not sent. Is it linked to Parsley? – Continuator

Turns out you cannot use data-parsley-group. Please see updated answer and jsfiddle. – Neva

Thanks so much Milz. You were totally right on this point. I misunderstood the use of data-parsley-group! The problem is solved. It's a shame! I don't have enough reputation to vote for your answer... But I would like to thank you for your help! – Continuator

I was, too, fooled by data-parsley-group. I'm glad you have the code working. – Neva