Posted by Norman Peelman on 03/03/07 12:27

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

[Back to original message]