I know this has been touched on (I've searched a LOT), and I suspect this can be done with some javascript - but I'm hoping somebody has actually done this successfully and can share some insight into the process.

I have a form that includes various fields such as "age" and "age at which you expect to retire". Before I allow submission of the form, I'd like to be sure that the second field is greater than the first - in addition to the range validations that I'm applying now. You can see a test version of the form here:

http://stronggroup.com/hlv/analysis.htm

Is it feasible to keep the CC WFB-defined fields on the form, and add some code (e.g., javascript, within a non-displaying html block?) to the second field, so that the allowable range is updated any time the first field ("age") is modified? Ideally, I'd like the second field to respect something like the following criteria:

"Planned retirement age" must be greater than (larger of (45 or current age))

...and that rule should be dynamically evaluated. Ideally, I'd like the error messages to appear as they do for all other WFB validation messages, as I suspect it will appear a bit unprofessional to have this form-level validation display validation errors in a different fashion. Maybe it's a simple as adjusting the validate range end-points for the second field any time the first field is touched (onblur)? Can this be done on the fly?

Is it feasible to inject code into the WFB form definition, so that i can still have the form managed and editable via WFB, but include this extra validation. If so -- any examples or guidance anyone can share?

Thanks in advance!

I'm already doing something like this on a form that I built. I have JQuery doing calculations and updating a field with the amount. If the user goes to edit the amount their presented with a popup warning with choices of keeping the current value or altering it. If they alter it it clears the value from one on the inputs that the calculations come from because now it's a manual entry instead of automatic calculation.

Eric -

This sounds promising. Any example code I might be able to look at to see how it's done? Also -- can this be inserted via WFB (i.e., in an html block?) or is it necessary to edit the html page that the form builder creates?

I'll grab the code from my form and place it on a new one. It utilizes some external JQuery files so those would have to be added to your site.

Fantastic! Adding files / libraries / whatever is no problem... Thanks Eric.

Ok I had a few minutes and grabbed my code. It may not be exactly what you want at the moment but it shows you what can be done. I'm using this type of thing with some calculations so I left that part in.
Here's the low down The first three fields will run a calculation on keyup if all their values are greater then 0. So if you do the standard thing and go down the form and fill in the values it will output a set amount of gallons for you. Now if you click in the Gallons applied input you will get a warning about changing it. This is because it was done through a calculation based on other inputs. In the warning you can cancel the edit or enter the actual gallons applied which will then empty the Strokes per pole since that is where the gallons final calculation is coming from.
Validation on other element value
You could alter the warning to box force the user to enter the proper amount

Eric (and anyone else who is willing to dive into this with me!) -

I've taken a stab at this -- had to read up on jquery, so I may be making a few basic mistakes, but I've got the general idea I think. My thoughts:

I really need the form to do a few field comparisons just before form submission, and if they fail the criteria, I pop up an alert describing the errors, and prevent the form action from taking place. That's the idea at least. So: here's the jquery code I put together:



No doubt the logic could be more elegant, but I'm most interested in just getting it working first (my first jquery, aside from cloning code to drive the google charts on my results page). BTW: the Switch statement purpose lets the lines fall through - if someone has 2 children, I want to compare the applicant's age to that of child 2 and child 1; if 5 children, compare age to child 5, 4, 3, 2, 1, etc. This seemed like a nice concise way to effect that.

So -- I included the script in the page header, and as you'll see, I was trying to bind this function to the submit event of the form "docContainer", which appears to the be the form name that WFB assigns. Just starting to experiment with this, but so far, it doesn't seem to be firing, so I may not have it bound properly to the form submit event. I also realized that WFB itself might have some jquery / javascript bound to that event -- would that override mine?

I ran into a few JQuery conflicts on the form I built. When your using 12 different js scripts on your form and a few of them require different versions of JQuery it takes some finagling to get all the problems worked out. The one thing I did find that it was best to keep anything you add above the forms JQuery reference. If you look at my example I'm checking on calculating on keyup then checking onclick for the value.

I found one issue already that might be causing the problem, and I have an idea about how to get past that. Specifically: the web page I'm using for this uses jquery to load the html form into the page when the page loads in the browser. Since jquery is async, I suspect I'm trying to bind the function BEFORE the form is actually loaded into the page. So...I think I'll have to find a way to use the load success event to install my validation script, so it actually has a form and fields to refer to.

Question: is the general approach going to work, i.e., if I bind my validation method to the form's submit event, will that work with WFB? Or is this already going to create a conflict with any process in WFB itself handling the form?

It should be fine if you check for validation the the submit click.