Get Parsley.js to recognize unhidden form elements

Question

I have some tags that are initially hidden on document load. I have an "add row" button which will unhide a row of form elements. I also have delete row buttons which will hide a given row of form elements.

Parsley validation works perfectly for the input tags that are present and visible when the document is loaded, but validation is not working for input tags that are revealed due to javascript events.

I've tried calling:

  $('form').parsley(); 

in the "add row" button click event handler but it doesn't seem to make a difference.

Is there something special I have to do to make parsley aware of these newly visible form elements?

Answer 1

When you add or remove input tags, you need to destroy parsley so the ParsleyForm object is destroyed. After that, you need to bind Parsley again in order to apply the validation to all visible inputs in your form. You can do this by:

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

Alternatively, you can add/remove the validation to specific fields, like this:

// add validation to #fieldId
$('#fieldId').parsley();
// remove validation from #fieldId
$('#fieldId').parsley().destroy();

The best option depends on how many fields you'll have. If you have a great number of fields in your form, Parlsey will take some time to destroy and re-create the objects. However, this is the easier option (as you don't need to know anything about the fields that are added or removed).

Note that when you bind Parlsey to your form ( $('form').parlsey() ), it will create a ParsleyForm object for the form and as many ParsleyField objects as the fields you have in your form.

Answer 2

If parsley is configured properly, then there should not be anything to special to do and it should work.

In your case, you probably want to add ':hidden' to the list of excluded fields and you should be good to go.

If it still doesn't work as expected, please provide an example...