Return form errors to original input page

[oldcelt]

Has anyone come up with a method of returning form errors to the requesting page, leaving correct data on the form and a message (in red, say) explaining the errors/omissions?

Ken

[russellr]

Hi,

We now have a JavaScript module that works with the "required" specification that FormMail uses.

This will check the fields before the form is submitted and provide immediate feedback to the user.

You simply need to download "formval.js" from our public downloads (http://www.tectite.com/public_downloads/) area, then upload it to your server into the same folder as your HTML form.

Then load it into your HTML by adding this to your page's HEAD section:


<script type="text/javascript" src="formval.js"></script>
The error formatting should work reasonably well without further modification, but if some things go out of place, post back with the URL of your form and I'll explain how you can improve it.

We plan that version 9 of FormMail will perform the same (or similar) error handling using server-side validation.

[oldcelt]

Thanks a million - I'll try that out today!

Ken

[oldcelt]

Oh, I have, at the moment, set up fmbadhandler.php using the default error form. Do I need to remove the call to this after setting up formval.js?

[russellr]

Hi,

No you don't have to stop using FMBadHandler.

The JavaScript checks work in the browser before the submission and don't affect the submission (other than to prevent it if the user has filled in the required fields).

[oldcelt]

That's great - works perfectly. Thanks very much,
Ken

[Russ Edwards]

...

Hello All -

I, too, want to report that formal.js works as it should and makes a profound difference in how Submit functions when a required field is left blank.

So much so that badformhandler is almost unnecessary! (I still need it for email addys that don't cut muster and for missing or incorrect CAPTCHA entries.)

Awesome addition to the tools here!

And implementation couldn't be simpler.

Unfortunately I am too lame to know how to format the actual error messages that appear on the form indicating which fields have missing values.

I have changed the wording successfully, but the text size, color, and other style attributes are exactly the same as the labels and other text on the form, and I see no way to, say, make them red or reposition where they appear under the empty field so they stand out.

Am I missing an easy way to do that?

Otherwise, I have used a couple of symbols to give some visual clue and primitive as it is, it is a better solution than sending someone to an entirely different page to be told he left one field blank.

BTW, I have changed the popup to this:

Ooops! We're missing something. Please enter the required info where marked with ^^

And the blank field error message to this:

*Please enter the requested info in the field above ^^

The ^^ sorta points up to the blank field, and the * Is how I marked the required fields (although in red.)

Hokey, I know. Any better solutions? Like red and bold?

Anyway, formal.js is a big deal to me and I sincerely appreciate it being made available.

Thanks!

Russ (Russ / Miami, not Russ / Oz)

...

[oldcelt]

I'd like some help on those factors as well please.
Ken

[russellr]

Hi,

formval.js dynamically adds an HTML to contain the error message (and then removes it when the error has been fixed by the user).

It works best with forms designed with the Form Designer in our Wizard, and using the CSS we supply.

However, you can utilize your own CSS to format the error message the way you want.

For errors, formval adds:

<span class="TectiteFieldError">error message</span>

For most fields this happens immediately after the field.

For groups of radio buttons, though, it adds the span to the beginning of the parent node, and follows it with a <br />. So, for radio buttons it's best to wrap them in <div>.

To style the error message, just create a CSS class like this:

.TectiteFieldError {
color:red;
font-weight:bold;
}

or use whatever style you want.

You can put this in the <head> section of your page like this:


<style type="text/css">
.TectiteFieldError {
color:red;
font-weight:bold;
}
</style>

[oldcelt]

I would like to thank you most sincerely for your continuous and rapid response to questions. Also for the excellent formmail itself and the additions which you make so readily available. It is one of the most useful and professional php scripts available and I am extremely grateful to you for all the work which has gone, and is still being put, into it.

Ken

[russellr]

Thank you very much! :)