output error messages in html

[GoogleCodeExporter]

First off i love the simplicity of your package.

Using alert() to display error messages has many drawbacks and penalties.

- First off it is impossible to make your form uniform across browsers.
- It is not degradable for no JS users.
- It causes some confusion because the user must remove the box before they
address the problems. They might forget what the message said while they
are trying to correct the problem. This is especially true when there are
multiple errors. Having the errors on the page allows a handy reference for
the user to look back and forth to.
- Alert boxes can not be styled.
- They are not friendly to handicapped users. most screen readers will not
read them and they can not be magnified by browser settings increasing font
size.
- They are kind of 'rude', i know this is not empirical, but people expect
that when something pops up on a web page it is spam or even worse some
kind of hacking attempt to get them to click something to download a virus.

I would suggest having a blank div at the top of the form and use the JS to
write the error messages to that div after validation. This would also be
easier for server side validation to hook into.
Alternatively it would be cool to have error messages inline with each
element that triggered an error.
I would be willing to help change the code to accommodate this if someone
with more intimate knowledge can point out any pitfalls to re-writing the
jsCycleElements function.
You can reach me at mdelay at imaginepub dot com
marc

Original issue reported on code.google.com by marcde...@gmail.com on 12 Apr 2010 at 10:58

[GoogleCodeExporter]

marcdelay,

Thanks for your feedback and support of this project.  

You present some good points about javascript validation, and I would enjoy 
seeing what you're envisioning.  
The jsCycleElements() function loops through each attached form element and 
validates all required elements 
accordingly based on the form element's type.  This function is also 
responsible for submitting the form's data 
via ajax if the appropriate form attribute is set.  Until recently, the code 
within this function resided in the 
render function; however it was moved to it's current location, as a separate 
function, to be reused for nested 
forms - see the Conditional Scenarios example.

Let me know if you have any specific questions regarding this function.

- Andrew

Original comment by ajporterfield@gmail.com on 13 Apr 2010 at 12:52

[GoogleCodeExporter]

Just to add to this,

The area that the error message will appear when there is an error with 
javascript
should also be the area the error appears when doing PHP validation. 

Original comment by moncojhr@gmail.com on 13 Apr 2010 at 12:11

[GoogleCodeExporter]

I think error messages above each individual input element (when there is an 
error
relating to that input) is the best way to go about it.

Original comment by moncojhr@gmail.com on 29 Apr 2010 at 3:18

• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Recently, I have been working on modifying how this project displays
error messages by replacing the javascript alerts with a more visually
appealing solution.  These changes are currently in the latest svn
revision which can be demoed at 
http://dev.streamotor.com/php-form-builder-class/.
Specifically, you can use the Javascript Validation example which is
linked toward the bottom of the index.php page.

If you'd like to look at the source, you can download by running the
following command...
svn export http://php-form-builder-class.googlecode.com/svn/trunk/ php-
form-builder-class

Please take a look and let me know what you think.

Thanks,
Andrew

Original comment by ajporterfield@gmail.com on 8 May 2010 at 5:50

[GoogleCodeExporter]

Hi,

I think the changes are good but when a user submits the form, it should tell 
them
all the things wrong with it, and not just the first thing wrong with it. 
Perhaps
each error message should display above the particular element that has the 
error.

Original comment by moncojhr@gmail.com on 10 May 2010 at 1:11

[GoogleCodeExporter]

My only concern with rendering the error messages above the particular elements 
is that formatting will be 
sacrificed if you're using the map functionality.

Original comment by ajporterfield@gmail.com on 10 May 2010 at 3:47

[GoogleCodeExporter]

Is there a way to switch between Alert messages and the errorMrgFormat ?

Original comment by tpetr...@gmail.com on 12 May 2010 at 2:30

[GoogleCodeExporter]

I should follow up my last post by saying that while the js_validation and
php_validation are awesome additions, some home brew app's do not allow
POST-ing/GET-ing to SELF.  Is there a way to include the alert() as another 
valid option?

Original comment by tpetr...@gmail.com on 12 May 2010 at 2:43

[GoogleCodeExporter]

tpetrone,

In the latest version, 1.0.5, there is a form attribute - jsErrorFunction - 
that can be passing in the form's 
setAttributes() function.  This jsErrorFunction can be set to any javascript 
function's name.  The appropriate 
error message will be passed to this javascript function.  By default, 
jsErrorFunction is set to a pre-built 
javascript function for rendering the red section at the top of the form.  If 
you wanted alerts, just set this 
attribute to "alert" and you should be all set.

Let me know if you have any further questions about this functionality.

Thanks,
Andrew

Original comment by ajporterfield@gmail.com on 12 May 2010 at 4:33

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Andrew,

 I am a bit confused by what you said so let me recap to see if I understand correctly

Alerts should work if I set some the attributes like the following:

$form->setAttributes(array(
  'jsErrorFunction' => 'alert',
  yadda => yadda,
  rest => of the attributes,
));

I tried this an I got nadda.

~Tim

Original comment by tpetr...@gmail.com on 12 May 2010 at 11:37

[GoogleCodeExporter]

tpetrone,

Yes, you're understanding correctly.  The code snippet you provided is correct. 
 I
just tested on my svn working copy and all worked well.  Two things...

1.  Can you please verify what version of the project you're using?  You might 
have
downloaded a working copy from subversion before that attribute made its way 
into
class.form.php.  You could also just open the class.form.php file you are 
currently
using and search for jsErrorFunction.

2.  Can you post a full example of your form?  Or at least a minimal working 
example?

Thanks,
Andrew

Original comment by ajporterfield@gmail.com on 12 May 2010 at 1:35

[GoogleCodeExporter]

Andrew,

 Running 1.0.5, May 10th build.  

I am not doing anything fancy but...

$form = new form();

$form->setAttributes(array(
  'includesPath' => '/path/to/includes',
  'action'=> '?page=render_form',
  'method' => 'POST',
  'jsErrotFunction' => 'alert',
  'id' => 'form',
  'style' => 'style/elements/here',
  'map' => 'num, num, num, num, num, num'
));

With 1.0.5 installed and includes path working, no validation occurs and it 
proceeds
right to the post page. (?page=render_form). 

All the form elements have a 'require' => '1' set for validation.  

I am going to clean out the web cache, restart apache and just clean the box 
up, see
if this changes anything. If not I am going to revert back to 1.0.4 and test.  

Looking over the class I don't see anything that specifically deals with 
'alert' as a
valid type, most of the ($this->jsErrorFunction) is dealing with the new [LABEL]
implementation.

Thanks
~Tim

Original comment by tpetr...@gmail.com on 12 May 2010 at 2:29

[GoogleCodeExporter]

You have jsErrotFunction instead of jsErrorFunction in your code above.  Is that
error also in your actual code?

Original comment by ajporterfield@gmail.com on 12 May 2010 at 2:46

[GoogleCodeExporter]

That's just typing error when I entered it into the comment box.

~T

Original comment by tpetr...@gmail.com on 12 May 2010 at 4:10

[GoogleCodeExporter]

Ok,

 Just did a flush cache in both safari and firefox, restarted apache and still the
same issues.. jsErrorFunction => alert doesn't seem to want to work..

I rolled back to 1.0.4 commented out the jsErrorFunction in the setAttributes 
array
and reload the page and the alert works fine..

I am going create a simple form with 1.0.5 and jsErrorFunction set and see what
happens... 

I will keep you posted , thanks for your support.

~Tim

Original comment by tpetr...@gmail.com on 12 May 2010 at 4:26

[GoogleCodeExporter]

Do you have a link to your webpage?  Are you getting js errors?  If so (to 
either) please provide them so I can try 
and help.  Also, some php code of your form would help as well.  You can email 
that to me directly at my email if 
you don't want it on this forum.

- Andrew

Original comment by ajporterfield@gmail.com on 12 May 2010 at 4:46

[GoogleCodeExporter]

Alerts were replaced by jQuery UI styled divs in version 1.0.5.  Also, the 
latest working copy now contains support for displaying multiple error messages 
displayed above the appropriate fields.

Original comment by ajporterfield@gmail.com on 29 Aug 2010 at 9:16

• Changed state: Fixed