473,729 Members | 2,144 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Thoughts on the best way of highlighting form input errors?

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

Mar 3 '07 #1
8 2777
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******@eminen t.demon.co.uk.n ot.this.bit.no. html
2 Tees Close, Witham, Essex.
Gravity beer in Essex <http://www.eminent.dem on.co.uk>
Mar 3 '07 #2
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="backgrou nd-color: {pgfirstname_co lor};"
type="text" name="pgfirstna me" maxlength="25" value="{pgfirst name}">
{pgfirstname_er ror}

....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_co lor} = "yellow"
2) {pgfirstname} = what the user entered minus invalid stuff that could
cause problems - so they can see the problem.
3) {pgfirstname_er ror} = 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
Mar 3 '07 #3
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/
Mar 4 '07 #4
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
Mar 4 '07 #5

"Phil Latio" <ph********@f-in-stupid.co.ukwro te in message
news:B1******** ************@fe 07.news.easynew s.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
Mar 4 '07 #6
On Mar 5, 3:00 am, "Phil Latio" <phil.la...@f-in-stupid.co.ukwro te:
"Phil Latio" <phil.la...@f-in-stupid.co.ukwro te in message

news:B1******** ************@fe 07.news.easynew s.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

Mar 6 '07 #7
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/
Mar 6 '07 #8
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/
Mar 6 '07 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
1980
by: Adelson Anton | last post by:
Hi all, Ok, this is what I want to do: When you press, say Ctrl+K ( it doesn't matter which event), I want the , say, second word in the document to be highlighted. Anyone has any idea how to go about doing this? Any reply will be appreciated.
4
7619
by: Bob hotmail.com> | last post by:
Everyone I have been spending weeks looking on the web for a good tutorial on how to use regular expressions and other methods to satisfy my craving for learning how to do FAST c-style syntax highlighting in C# but I have yet to find anything useful I know there are people at MS that know this stuff like the front of their hand and I know there are many people out on the web that are proficient in doing this as well but it seems nobody...
35
1885
by: Justin Weinberg | last post by:
My thoughts on this.... http://msdn.microsoft.com/vbasic/Future/default.aspx?pull=/library/en-us/dnvs05/html/vb9overview.asp My thoughts: 1. Regarding Implicit types, I don't use type declaration for the benefits of performance. It's for the benefit of clarity of purpose when reading code. The first thing I do with neophyte developers is turn Option Strict
9
4178
by: julie.siebel | last post by:
Hello all! As embarrassing as it is to admit this, I've been designing db driven websites using javascript and vbscript for about 6-7 years now, and I am *horrible* at form validation. To be honest I usually hire someone to do it for me, grab predone scripts and kind of hack out the parts that I need, or just do very minimal validation (e.g. this is numeric, this is alpha-numeric, etc.)
7
6997
by: h7qvnk7q001 | last post by:
I'm trying to implement a simple server-side form validation (No Javascript). If the user submits a form with errors, I want to redisplay the same form with the errors highlighted. Once the form is correct I need to submit to another page that uses the form data. I first tried making the form submit action= field point to the same file. When the form was correct, I tried loading the next page by using <META http-equiv refresh>. But...
6
1700
by: Zim Babwe | last post by:
VS 2005 Windows Application I need to have users enter product information, then contact information, then some other financial information. Currently I have a form that the user enters info on, and at the top, I have a menu that has the three options "Product", "Contact", "Other". When any option is chosen, I display another form. The manager says, it is confusing to the user on how to navigate. Which I think is ridiculous but hey,...
1
2825
by: Muchach | last post by:
Hello, Ok so what I've got going on is a form that is populated by pulling info from database then using php do{} to create elements in form. I have a text box in each table row for the user to enter input. I need to take this user input and put it back into the database. What would be the best method to do this. I can't use a normal post because the name of the text box is the same for each table row. I've heard that posting the...
5
2984
by: Lea GRIS | last post by:
Hello, Are there any generic and CSS standard mean of highlighting an accesskey? I only fond a workaround by encapsulating the corresponding letter in a <em></eminside the label. But it is not applicable for a submit button which label is not a content. Here is en example: <form method="get" action="http://example.com/cgi-bin/smokeping.cgi"
1
3326
by: chromis | last post by:
Hi, I'm having trouble fully implementing the edit section of a contact admin system, so far I have written the following: - Bean (Contact.cfc) - Data Access object (ContactDAO.cfc) - Gateway (ContactGateway.cfc) - index.cfm - Deals with the business logic - display/form.cfm - Produces the form for both add and edit behaviour
0
8763
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9428
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9288
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9206
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9154
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8156
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6722
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6026
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4797
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.