Programatically add fields to parsley form - parsley.js

Question

I'm using parsleyjs to validate my forms client-side. I have a scenario where, on click of a checkbox, some more form fields are exposed and need validating. If the checkbox is then unclicked the form fields are hidden and validation needs removing.
Is there functionality to achieve this in parsley? I've looked through the docs but can only find details of how to validate through attributes in the html. I'm looking for a method I can call in code to add and remove fields to be validated.

Answer 1

I ran into this exact situation a couple of weeks ago. You do need an extra bit of js to accomplish this. I dug around and found one bit of script that came close but needed some tweaking to suit my needs: it depended on predefined field definitions. No bueno. I wanted it to duplicate fields regardless of their names/ids/whatever. Then, of course, increment each new field name. Also without cloning whatever values had been entered by the user.
Since the fields being cloned already have the necessary parsley validation, that just went right along with them.
Here's the cloning code I came up with. I'm sure it can use improvement. And here's a fiddle with a working example.
this is my first contribution after years of lurking. be gentle. ;)
$('#btnDel').prop('disabled', true);
$('#btnAdd').prop('disabled', false);
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input1').clone().val('').attr('id', 'input' + newNum);
newElem.find(':input').attr('id', function () {
return this.id + '_' + newNum
});
newElem.find(':input').attr('name', function () {
return this.name + '_' + newNum
});
newElem.find(':input').val('');
$('#input' + num).after(newElem);
$('#btnDel').prop('disabled', false);
if (newNum == 5){
$('#btnAdd').prop('disabled', true);
}
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').prop('disabled', false);
if (num-1 == 1){
$('#btnDel').prop('disabled', true);
}
});
$('#btnDel').prop('disabled', true);
});

Answer 2

Parsley is great for most validation scenarios but in the past I've struggled to get it to do what I need - the lack of ability to programmatically interact with the validation lifecycle makes it less useful for more complex validations.
I wrote a library called Okjs that works in a very similar fashion to Parsley but with the added benefit that when you need to do something like add a new validator to a field based on user interaction there's a code API to allow you to do so:
https://github.com/jamesfiltness/Okjs
To add fields on click of a checkbox in Ok would go like so:
$('.my__checkbox').focus(function() {
Ok.Form.addField('checkbox1', ['required']);
Ok.Form.addField('checkbox2', ['required']);
})