Hi all -

I've been off the forum for a couple of weeks, but have made tremendous progress on my project, including use of CC Web Form Builder. One question lingers at this point, relating to the display of field validation error messages.

Currently - the various numeric input fields have ranges specified. It seems that the validation rule (field entry is a number in the right range) is being performed on each keystroke after someone enters the field. For example: I go into an Age field that is defined with a range from 20 to 64. As soon as I type a single character, e.g., "5", the validation error pops up under the field, and remains there until I type the second digit -- and of course if the number is in the proper range, the error message disappears.

Also: when the validation error message appears under the field, it pushes the rest of the form down to make room for the message -- and the form shrinks back up again once the input error is corrected. With validation happening, seemingly, on every keystroke, the error message is appearing and disappearing a LOT, because ANY numeric field with a range validation and inputs larger than two digits is causing validation messages to pop up and disappear as I fill in field entries.

Is there any way to modify this behavior? Specifically:
- why is the field validation happening on each keystroke instead of the "onblur" (field exit) event? Can I can change this?
- is there any way to adjust form spacing so error messages that appear don't force the rest of the form to shift down?

Jon

I forgot to share the FB file...can't upload here, as the forum limit is 100kb, and the form, even zipped, is over 140kb.... All in all, I'm pleased with the form -- multiple successive field display dependencies, I learned how to manage spacing and layout. Last issue is this field validation questions.

Anyway -- I've uploaded the form to DropBox -- you can access it here:

https://dl.dropboxusercontent.com/u/71442818/hlv_calc_form_test1.fb

thanks!

How about a link to your form.

The site is still in progress, but I have a test version online at:

http://www.stronggroup.com/hlv

The form itself is on the "analysis" page. You can navigate there from the front page, or head straight to:

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

To all who try this - please remember it's only partially finished (including the results page, where I'm experimenting with Google Visualizations but haven't finalized them yet, or the text and layout. But the form itself on the Analysis page should illustrate the issue.

Also - if you download the FB file from DropBox following my link in the second post in this thread, I think you'll see the exact same effect if you preview the form.

Try setting your maximum errors to 1. That will help with the form stretch. For the onblur I'll need to see where they are setting the keyup.

Just tried that in WFB -- and even in the preview it's showing the same behavior: executing field validation on the first keystroke in the first field and showing the error message below the field.

EDIT: didn't see your whole post... But yes - limiting error reporting to 1 error helps with some of the form stretch, but the onblur / onkeyup or onkeystroke part is probably where the issue is coming in. Is this normal for a validated numeric field?

I would say yes because it's no different then letting them enter a bunch of characters that aren't allowed then they only find out after they enter them all that they have to reenter the data. How about giving a hint to what they are suppose to enter?

We might add the hint -- I had hints populated at first, but the client didn't like additional text on screen. The placeholder text "age in years" generally keeps most people on track for the right kind of entry. Just a pity that the value is validated against the range before onblur. They pretty much guarantees that any number-type input field that requires 2 or more digits will invariably show a validation error msg as the user fills it in. Not a deal-breaker, but I anticipate my client asking about this.

One other thought - and I imagine this should go in a suggestions thread / wishlist for a future version: onkeydown logic could be added to number fields so that only digits 0 through 10 and "." could be entered...and if the javascript developer were sufficiently ambitious, onkeydown code could also make sure that only one "." could be entered... With that logic added, I think it would make perfect sense to perform the range validation in an onblur event. All nice ideas for the future... I just have to focus primarily on delivering for my current client today.

Interestingly,different browsers show the input field differently: Chrome adds a spinner on the right side of number fields, and these respect the field's range and increment values, so if you're in Chrome, you can simply click on the up or down arrow on the spinner, select the right value and never see an error. But...if you click in the field and start to type a number, that's when the onkeystroke or onkeyup is forcing validation.

You could replace your number field with a regular expression.

Intriguing! I'm aware of these, but haven't looked closely at creating a regex in many years. I'll have to read up a bit and give it a try. Thanks! That's the most promising idea I've seen in a bit... Only downside here (and I can give my client a choice - one set of behaviors or the other) would be that browsers that display the spinner in number field (like Chrome), wouldn't know to do that in a regex field... Can't have everything -- but this is a great idea and gives me some more options.