Forums

Okay, I've been through the whole entire fantastic forum and saw that many of people have posted about this issue. And that upon validation the errors will show, but if you're at the bottom of the page and the error is at the top of the page you get no indication of it and it looks like the form is just sitting there... well, everyone posts about it... and everyone just says use "Javascript" but no one actually writes out an example of how they're handling it or where to put it.

I wrote out some Javascript.. based on a working example I found on the web outside of ChronoForms and tried to duplicate it, but upon implementing it.. it did not work at all.

Does anyone have a little more in depth help about how to make this happen? Please and Thank you.

I really think that given how many people have posted about this issue someone should look into making this a part of the actual form that occurs naturally. I get that a multi-page form is an option, but as a web user -- I find them annoying so to me it never seems like a solution.

Thank you in advance for anyone who has any kind of help to offer.. and in case I don't mention it later.. I love ya for it!

Hi HelpMePlease! How are you?

Indeed you're right. I'd also faced that problem in a recent form.
Based on the UX (User Experience), we should be objective to don't let the user wondering what happened. Well, my solution wasn't the elegant one, but was suggested by my Boss.

/******* FIRST *********/
Actually is to leave a message (inside a div) near the submit/confirmation button saying something like "In case of no response, please check any erros/fields above. Thank you."

That's an easier solution but not so elegant. The correct could be a trick with Javascript that would display a message once any validation errors occurs, until then remains invisible.

OR

/******* SECOND *********/
An event that would run a function if any errors occurred and, as you already said, jump direct to this field.

Note that the first option is more like emergency, in case you have no more time to develop and needs to publish.

I'm also studying this incredible and flexible tool that is Chrono Engine and some interactions with Javascript and PHP + MySQL.

Best of Luck,
Aluízo Jr.

Hi HelpMePlease,

If you add a Text Element to your form near the Submit Button like this:

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text" id='LV_warning' style='display:none;'>Please fix the errors shown above.</span> </div>
  <div class="cfclear"> </div>
</div>

and a JavaScript snippet in the Form JavaScript box like this

window.addEvent('domready', function() {
  $('ChronoContact_my_form_name').addEvent('submit', function() {
    var messages = $$('span.LV_invalid');
    if ( messages.length > 1 ) {
      $('LV_warning').setStyle('display', 'block');
    } else {
      $('LV_warning').setStyle('display', 'none');
    }
  });
});

Note: Replace 'my_form_name' with the name of your form!!

That should do what you want. You can change the message and styling to suit your form.

Bob

If i understand this code correctly it will just pop up the error message telling u to look up no?

But i would love to know how to solve the original question:
To actually have a jump to error or set focus function on clicking submit, that jumps to the highest required field that has been missed in the form.

if you could provide instructions on how to do that i would be greatly appreciative🙂


cheers

With a bit of research, I found a Javascript function that scrolls the page to a particular point, but not exactly the field...

I guess that it works pretty well: (WARNING! Test Needed!)

Code below to be inserted at the Form Javascript box:

function jumpScroll() {
   	window.scroll(0,0); // horizontal and vertical scroll coordinates targets (in pixels)
}

Code to the warning

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text" id='LV_warning' style='display:none;'>Please fix the errors shown above.<br />
  <a href="javascript:jumpScroll()">Jump to top</a></span> </div>
  <div class="cfclear"> </div>
</div>

Best of Luck,
Aluízo Jr.

Hi shcnitz123,

Please try

window.addEvent('domready', function() {
  $('ChronoContact_my_form_name').addEvent('submit', function() {
    var messages = $$('.LV_invalid_field');
    messages[0].focus();
  });
});

Bob

wow thats pretty sweat😀 works a treat.

only one tiny little issue. when it jumps to the field it doesn't display the validation error message.

u can click away so the cursor is no longer in the field and the error message comes up, but as soon as u click the field again it removes it.

i know it may sound petty or whatever, but esp in the case where i have 2 email inputs (for confirmation, so in the validation tab of the edit form, i got under 13-validate-confirmation: email1=email2) or radio/check boxes (where it jumps and highlights the top option, but no validation error message) it can get confusing for the user :?

any chance of a fix?

many many thanks tho! excellent work so far🙂

NEVERMIND LOL😀

i fixed it. just need to blur it. so the full script is:

window.addEvent('domready', function() {
$('ChronoContact_formname').addEvent('submit', function() {
var messages = $$('.LV_invalid_field');
messages[0].focus();
messages[0].blur();
});
});

your help has been much appreciated😀

Cheers!

No wait just a minute!😛

k so it works for everything apart from the confirmation email field which i described above... :/

the problem is with the validation i think though. since at the moment (well, before putting this script in) you could type two diff email addresses, and have the fields look ok (green border and all) and it wasn't until clicking submit that it would put up the validation error message.

any ideas?

Bump and to clarify my question🙂

So i'm using the validation to check two email fields are matching. In the validation tab of the form i have:
13-validate-confirm: email1=email2

this works fine-ish, but only validates onsubmit (i have onlyOnSubmit set to no, and onlyOnBlur set to yes and this works fine for all other fields). While you're filling out the form, you can type in two different email addresses and no validation error message will pop up, and the field will have a green border etc.
It's only when you click submit, that the validation error message pops up + the border goes red.

Now i've added the above js, to set focus to the first field that has a validation error on clicking submit, it jumps up BEFORE popping up the validation error message and making the border red.

So is there any way to change the order of these two events? Or to set the 13-validate-confirm validation to actually occur OnBlur? either i think would solve the problem.


Cheers!😀