Thoughts on the best way of highlighting form input errors?

[Phil Latio]

I've been creating an application over the last few weeks and generally
pleased with what I have produced but one area is irritating me, form
validation.

At the moment the forms are simply static html templates and the form input
is checked using a validation class. Basically each form field is checked,
every error is stored to an array and at the end of checking of the complete
form, the array is output neatly at the top of the form.

However this is just not sexy enough for me, what I would like to happen is
for the input boxes with errors to be highlighted with a red border (or
something along those lines). I would also like to have the error messages
under the box which the error occured, not altogether at the top of the
page.

So I am currently wondering how to achieve this and what choices are open to
me on methods available? I've had a google around the web and found some
form validation classes but they basically do what I already achieved. I've
thought of creating the forms dynamically but that in itself doesn't address
how to achieve my goal.

I am sure many people have already successfully done this, if you have the
please could give me an outline (the theory) of how you did it. I don't want
or need code, I am simply stuck at the moment on how to approach this.

Cheers

Phil

[Peter Fox]

Following on from Phil Latio's message. . .

>At the moment the forms are simply static html templates and the form input
is checked using a validation class. Basically each form field is checked,
every error is stored to an array and at the end of checking of the complete
form, the array is output neatly at the top of the form.

After weeding anything that might be XSS :)

>
However this is just not sexy enough for me, what I would like to happen is
for the input boxes with errors to be highlighted with a red border (or
something along those lines). I would also like to have the error messages
under the box which the error occured, not altogether at the top of the
page.

Basic principle that I use is two pronged

1
Flag the page with a big banner "Something's wrong"

2
Put in a yellow background to the input control (eg switch the css class
of the control)
There are two things that you'll need to pick up on

1
Dynamically generated pages are the way to go and are not difficult to
master.

2
You should have enough 'how to fill in this field' information already
displayed on the form so in general you don't need specific extra error
information. If there are lots of errors then that indicates poor UI
design. Sometimes there are messages that you want to display that are
more than how to type the date in properly. For these you need *more*
than a 'bzzzt wrong' indication. For example suppose you are asking for
a six digit reference number then field highlighting might be
appropriate for the wrong number of digits, a permanent 'where to find
your reference number' help message and a 'sorry we don't have anything
for that reference number pop-up or page - _with what happens next_
clearly explained.

--
PETER FOX Not the same since the bookshop idea was shelved
pe******@eminent.demon.co.uk.not.this.bit.no.html
2 Tees Close, Witham, Essex.
Gravity beer in Essex <http://www.eminent.demon.co.uk>

[Norman Peelman]

Phil Latio wrote:

I've been creating an application over the last few weeks and generally
pleased with what I have produced but one area is irritating me, form
validation.

At the moment the forms are simply static html templates and the form input
is checked using a validation class. Basically each form field is checked,
every error is stored to an array and at the end of checking of the complete
form, the array is output neatly at the top of the form.

However this is just not sexy enough for me, what I would like to happen is
for the input boxes with errors to be highlighted with a red border (or
something along those lines). I would also like to have the error messages
under the box which the error occured, not altogether at the top of the
page.

So I am currently wondering how to achieve this and what choices are open to
me on methods available? I've had a google around the web and found some
form validation classes but they basically do what I already achieved. I've
thought of creating the forms dynamically but that in itself doesn't address
how to achieve my goal.

I am sure many people have already successfully done this, if you have the
please could give me an outline (the theory) of how you did it. I don't want
or need code, I am simply stuck at the moment on how to approach this.

Cheers

Phil

Using a template system for my forms, I do the following:

1) I have variables for setting the STYLEs of my input controls
2) I have variables for setting any extra info if needed

example:

First name: <input style="background-color: {pgfirstname_color};"
type="text" name="pgfirstname" maxlength="25" value="{pgfirstname}">
{pgfirstname_error}

....when resolved, if any variable (placeholder {}) resolves to "" then
the default value is used. So in this example the first time into the
form the variables are set to empty strings "" and the form looks
normal. After validation I set variables accordingly so that:

1) {pgfirstname_color} = "yellow"
2) {pgfirstname} = what the user entered minus invalid stuff that could
cause problems - so they can see the problem.
3) {pgfirstname_error} = a description of the error ("Invalid
characters!", "We really need your first name!", etc.)

results:

no entry:
First name: blank yellow text input We really need your first name!

invalid chars:
First name: N0rman (yellow background) Invalid characters!

This can be done alot more dynamically, I just chose not too.

Norm

[Manuel Lemos]

Hello,

on 03/02/2007 11:09 PM Phil Latio said the following:

At the moment the forms are simply static html templates and the form input
is checked using a validation class. Basically each form field is checked,
every error is stored to an array and at the end of checking of the complete
form, the array is output neatly at the top of the form.

However this is just not sexy enough for me, what I would like to happen is
for the input boxes with errors to be highlighted with a red border (or
something along those lines). I would also like to have the error messages
under the box which the error occured, not altogether at the top of the
page.

So I am currently wondering how to achieve this and what choices are open to
me on methods available? I've had a google around the web and found some
form validation classes but they basically do what I already achieved. I've
thought of creating the forms dynamically but that in itself doesn't address
how to achieve my goal.

I am sure many people have already successfully done this, if you have the
please could give me an outline (the theory) of how you did it. I don't want
or need code, I am simply stuck at the moment on how to approach this.

You may want to take a look at this forms generation and validation class.

Among other things, it can highlight invalid inputs with an alternative
CSS class or individual style attributes. It can generate Javascript to
highlight invalid fields on the browser side or server side.

You can set a global invalid class or style or different invali classes
or styles for different inputs.

http://www.phpclasses.org/formsgeneration

Take a look here at the test_form.php script in action:

http://www.meta-language.net/forms-e...mple=test_form

Here you can see a tutorial video with a section that explains that example:

http://www.phpclasses.org/browse/vid...mple-form.html
--

Regards,
Manuel Lemos

Metastorage - Data object relational mapping layer generator
http://www.metastorage.net/

PHP Classes - Free ready to use OOP components written in PHP
http://www.phpclasses.org/

[Phil Latio]

Here you can see a tutorial video with a section that explains that

example:

http://www.phpclasses.org/browse/vid...mple-form.html

I am currently enjoying your audio/visual presentation. I have actually
started listening from the beginning.

Not made any decisions on what direction I am going to take but I did also
like your example form. I don't like pop-up windows (purely personal
preference) but will certainly have a look at the code once I've finished
viewing the video.

Cheers

Phil

[Phil Latio]

"Phil Latio" <ph********@f-in-stupid.co.ukwrote in message
news:B1********************@fe07.news.easynews.com ...

>Here you can see a tutorial video with a section that explains that
example:

http://www.phpclasses.org/browse/vid...mple-form.html

I am currently enjoying your audio/visual presentation. I have actually
started listening from the beginning.

Not made any decisions on what direction I am going to take but I did also
like your example form. I don't like pop-up windows (purely personal
preference) but will certainly have a look at the code once I've finished
viewing the video.

Had a bit of look at your package but it's not for me as I like to totally
seperate mark-up/presentation from the code. However I salute you on your
efforts and the audio/visual presentation is a great idea if perhaps a
little long winded.

Thanks again for your input.

Cheers

Phil

[acsandeep]

On Mar 5, 3:00 am, "Phil Latio" <[e-mail]:

"Phil Latio" <[e-mail] in message

news:B1********************@fe07.news.easynews.com ...

Here you can see a tutorial video with a section that explains that
example:

>http://www.phpclasses.org/browse/vid...ion/example-fo...

I am currently enjoying your audio/visual presentation. I have actually
started listening from the beginning.

Not made any decisions on what direction I am going to take but I did also
like your example form. I don't like pop-up windows (purely personal
preference) but will certainly have a look at the code once I've finished
viewing the video.

Had a bit of look at your package but it's not for me as I like to totally
seperate mark-up/presentation from the code. However I salute you on your
efforts and the audio/visual presentation is a great idea if perhaps a
little long winded.

Thanks again for your input.

Cheers

Phil

Maybe you can take a look at PEAR:Quickform. It accepts Smarty as
renderer so you can couple the two together and separate the markup
from the application logic. Also if you are willing maybe you can test-
drive the code-lib i created using PEAR and some other useful classes
and wrapped them around a simple Controller. You can download it from
here and run the setup file in the setup folder or change the config
file manually.

http://www.esnips.com/doc/356a32f6-1.../tuxedo-ver0.1

[Manuel Lemos]

Hello,

on 03/04/2007 07:00 PM Phil Latio said the following:

>>Here you can see a tutorial video with a section that explains that
example:

http://www.phpclasses.org/browse/vid...mple-form.html

I am currently enjoying your audio/visual presentation. I have actually
started listening from the beginning.

Not made any decisions on what direction I am going to take but I did also
like your example form. I don't like pop-up windows (purely personal
preference) but will certainly have a look at the code once I've finished
viewing the video.

Had a bit of look at your package but it's not for me as I like to totally
seperate mark-up/presentation from the code. However I salute you on your

Maybe it was not clear for you, but the class gives you complete freedom
to separate markup presentation from code. For instance, if you prefer
to use Smarty to define your forms presentation, the class comes a
plug-in to integrate with Smarty template engine.

If you watch this video section to the end, you see it provides
different form rendering alternatives to match the preferences of
different people:

http://www.phpclasses.org/browse/vid...templates.html

If you do not want to write any HTML at all, there is also an
alternative renderer plug-in that uses a common vertical layout with one
field per row.

efforts and the audio/visual presentation is a great idea if perhaps a
little long winded.

This class is very popular because it covers a long list of needs of
many different people. That is why it took a 4 hour video to give a
tutorial to explain all it does.

--

Regards,
Manuel Lemos

Metastorage - Data object relational mapping layer generator
http://www.metastorage.net/

PHP Classes - Free ready to use OOP components written in PHP
http://www.phpclasses.org/

[Manuel Lemos]

Hello,

on 03/04/2007 02:07 PM Phil Latio said the following:

>Here you can see a tutorial video with a section that explains that
example:

http://www.phpclasses.org/browse/vid...mple-form.html

I am currently enjoying your audio/visual presentation. I have actually
started listening from the beginning.

Not made any decisions on what direction I am going to take but I did also
like your example form. I don't like pop-up windows (purely personal
preference) but will certainly have a look at the code once I've finished
viewing the video.

That pop-up window is a Javascript alert box. It appears in the video
because the example uses browser side validation along with server side
validation. You can disable browser side validation and the alert box
never appears because the server side validation displays errors in the
HTML page.

Anyway, a plug-in to intercept browser side validation errors is being
implemented so you can customize how the error messages will appear in
the browser even before it is submitted to the server.

--

Regards,
Manuel Lemos

Metastorage - Data object relational mapping layer generator
http://www.metastorage.net/

PHP Classes - Free ready to use OOP components written in PHP
http://www.phpclasses.org/