[jQuery] Validate and dynamically added controls

[jQuery] Validate and dynamically added controls


I have a form in a project that allows users to build up surveys. The
form can have controls added dynamically as users add questions to
their form. I need to be able to validate this form client side as
sending a form to the server that it can't validate just results in an
error message and the form being lost (The server side validation is
fine, but how to handle an invalid form server side will need to be
made friendlier) so I want to avoid sending such forms if I can avoid
it.
What I basically need is a way of adding validation rules along with
controls so no matter the configuration of the form when it's
submitted the validator can check that it's well formed before sending
it to the server side script.
I was hoping setting validation up on the form on load and then using
rules ('add') on each control as I add it would work but it apparently
doesn't
For example, after an "Add input" button is clicked, code like below
(heavily simplified for clarity) would be executed:
var newControl = $('<input type="text" name="(unique name generated
earlier on goes here)" />')
surveyForm.append (newControl);
newControl.rules ('add', {'require': true});
This doesn't seem to cause any javascript errors, but hitting the
submit button doesn't cause the newly added control to be validated.
Is there something I need to do other than add a rule? Or can't this
be done yet? I seem to remember the above approach worked in 1.3.1
but the other problems with that version means I can't use it with my
project.