Dynamic form validation issues

Background:

I'm new to JS and Prototype, so bear with me.

I have a very large form. The full form currently weighs in at 233K. Roughly 400 form items with markup, styling, and some custom JS. It uses Prototype with Jotform "enhancements" that weigh in at 370K uncompressed. That's 600K for anyone skimming this.

600K. And I've taken to referring to it as ProJo just to reduce the weight of something related to it.

It's meant to be used in the field on mobile phones and potentially tablets so I decided, for better or worse, that since some of the sections are only needed occasionally, that I would cut them out and add them dynamically as required. This part works flawlessly (with minor hide/show glitches, which I assume are related to using the existing animations in a way they weren't meant to, but so not the point right now).

What doesn't work anymore is form validation. It appears that every form and CSS element is "collected" when the page is loaded, and anything added dynamically doesn't get included into the collection.

I've seen through my searches that this is kind of a common phenomenon, and unfortunately none of the solutions apply to ProJo, or where they might, don't give me enough to bite into. This solution is as close as I've come but I don't understand how to apply it, even if it's the right answer to my problem. From what I understand it applies to specific functions that you wish to apply to all elements from the moment of calling it. The challenge is I don't know what function(s) to call.

The form is initialized with JotForm.init();. Is there a way to re-init? Is that something that Prototype would do or would it be something that exists, if it exists, in the Jotform enhancements? If not, is it possible, and if so, how would I go about do it?

I spent a couple of hours yesterday doing a bunch traces on the functions called in ProJo using the chrome debugger and adding breakpoints on both the ProJo script and DOM events but due to what I recognize is my inexperience with the language, ProJo, and doing debugging like that, I couldn't figure it out.

Here's a link to the jotform.js in question.

If you need more code, let me know... I'm nearing a point where I'm thinking it might be easier just to re-implement the validation and animations in jQuery. To be fair, I've never used jQuery... only read comparisons between jQuery and Prototype online, but the wealth of examples, guides, user base, and ready to run plugins is a huge draw. JotForm is a great way to build a good looking form with great functionality quickly, but my needs go a bit further I guess. To their credit, from what I've seen most, if not all, of the styling is done in CSS and they only modify the class values to change the appearance of the form for validation purposes.

So to sum up: Prototype/JotForm (ProJo) "enhanced" form where dynamic form elements don't validate. Is there a way to re-init ProJo or call some function that does or call just the functions that are required (which are unknown to me)? Does anyone think/know whether it's worth redoing in jQuery?

One more question, as an aside: Is my开发者_如何学C methodology flawed? Has anyone else implemented a form this large for mobile solutions? What was your experience?

Thanks

Rather than removing the elements from the form, why not hide them in a "rollup section"? Wrap sections of the form in a div (or fieldset) then use Element.hide/Element.show (or even rollup/rolldown animations from scriptaculous). You can preset the form with some of these less used sections already hidden using Element.hide in a dom:loaded event handler. The important point is not to disable form fields (or remove them) then the validator should see the entire form and work.

This is a technique I've used on a rather complex web-app (Using my own generator/populator/validator/submitter library), it reduces code complexity because all the form is always there, and the users found the rollup/rolldown idea quite easy to get to grips with. It even works on iPhone and Android!