[Solved]Formit, how to stop full page reload after pressing submit on form?

I have quite long contact us page (with scrollbar) and at the very bottom is a formit contact form.
I'm using error messages, so If a field is left blank red error message will appear.

If I fill out every form field and press submit forms gets sent, user gets redirected to "Thank you" page

Problems start when I don't fill out all form fields.
After leaving some form fields blank and pressing submit page gets reloaded (and error message appears), but since this page is very long, after pressing submit I get redirected to top of the page, when I scroll down I see form with error message, but this will be confusing for users, since I think most of them will think that form got sent, and will just continue to browse site. [ed. note: viltnieks last edited this post 12 years, 7 months ago.]

I think the only way around that is JavaScript validation. That way the form is not submitted until everything is kosher.

Sounds to me that you need to split the form up into smaller chunks (I do not mean MODX chunks) - either on separate pages or using a slider or something similar. Some error checking could be done as you go along - with server-side error checking as well when the whole form is finally submitted.

Several shorter forms seem more friendly and efficient than one long one.

You could also try making the form an overlay; that's what I've done with the contact form on my site. The form is hidden and there is a link styled as a button that uses Javascript to display it. The javascript will automatically display the form if the error message elements are not empty. There are tons of Javascript overlays available, including dozens of different JQuery plugins.

Or you could have a bit of Javascript to scroll the page to the form if the HTML element that contains error messages are not empty.

Even better is having the form itself be an AJAX application since in that case the page doesn't refresh at all; the form snippet itself is on another resource with no template, and that resource's URL is used as the AJAX target and the form snippet works as the AJAX processor. I have successfully used eForm with Evo for this; I would presume that formit for Revo would do the same. The link on the contact page would actually go to yet a third resource which uses the common template, and that resource in your case would have a very abbreviated version of your contact page's content and the form. This link is disabled by the Javascript, so the extra page load would only be experienced by the few users who have Javascript blocked.

You could look at the code in the SPForm package. It uses fairly simple JS validation to check for required fields and validate the email address. It pops up an instant alert when the submit button is clicked but the form is not ready to send so the page never reloads.

Jquery validation method worked like a peach ! Thank you for suggesting this

Another, far easier solution which I used the other day is to give the forms container div an id and update your form action like this. <form action="[[~[[*id]]]]#id-of-your-div"> that way when users get redirected after fail, they will go straight to the top of your form when your error message is.

Pros: Works without JS
Cons: adds the hash to your URL.

Cheers
Ash