LiveValidation error display placement question

Hi again,

I have a form that is quite lengthy, so by the time a person gets to the submit button, the top of the form is not visible in the browser.

I understand that LiveValidation will, by definition, alert people if they've skipped a required field or entered data improperly, but in the off chance someone fails to see (or heed) the alert, there is a potential problem.

The problem is, if a user clicks the submit button and there is still an incomplete field on the form above where the person can see, there is no feedback next to the submit button telling the person what's wrong. In other words, the submit button fails silently.

Some validation scripts will bounce you back up the form to the incorrect field when you click the submit button, but this script doesn't seem to do that. I've tested the form using the "Beez" template to check and it's still failing silently.

A) Is this silent failure on submit normal behavior for Chronoforms?
B) If "A" is true, how can I insert a failure message next to the Submit button? Something simple like "There was a problem submitting your form. Please scroll up and correct your info where indicated."

Any and all suggestions appreciated!

Hi Grumpster,

The default validation for ChronoForms is the silent message alongside the input.

ChronoForms uses the LiveValidation library and the library will alow you more flexibility in messaging than the ChronoForms implementation. Here's an example that will put the message in a<div id='messages'></div> that you could place anywhere.

window.addEvent('load', function() {
  var text_0_val = new LiveValidation(' text_0', {
    validMessage: 'Perfect, well done!',
    insertAfterWhatNode : 'messages'
  });
  text_0_val.add(
    Validate.Format, {
      pattern: /(0?[1-9]|1[012])[\- \/.](0?[1-9]|[12][0-9]|3[01])[\- \/.](19|20)?[0-9]{2}/,
      failureMessage: 'Oops! Invalid date.'
  });
});

To do this you'd either have to hack the ChronoForms code to edit the validations there, or, use custom validations for each of your inputs.

You could also add JavaScript to check for error messages and display an alert or a general message near the submit button.

Bob

PS Probably I'd also think about breaking a long form into separate steps which reduces the problem.

Great advice, as always, Bob🙂

Just looked at your excellent multi-page plugin instructions.

As good as those instructions are, I think I'll take the lazy person's route and re-design my form so all the fields are above "the fold" so to speak. I can do it by simply making the form in two columns rather than one since it is, at the moment, only one-and-a-half "pages" in length.

I may also hide some of the optional questions using some Javascript and that'll also tighten things up.