Page 2 of 2

Re: Alternative to form generation?

Posted: Tue Jul 14, 2009 8:27 pm
by Eran
usability and accessibility will be sorely limited if all feedback is done through js and javascript is disabled for whatever reason.
I usually have PHP generated error messages to back up javascript messages. The PHP generated messages are usually a simple unordered list with some minor styling.

Re: Alternative to form generation?

Posted: Tue Jul 14, 2009 8:51 pm
by Christopher
pytrin wrote:I usually have PHP generated error messages to back up javascript messages. The PHP generated messages are usually a simple unordered list with some minor styling.
Have you thought about using the unordered list as also being the data source for Javascript. So doing something like this:

Code: Select all

<form ... id="form1">
<div id="form1_error">
  <!--
  UL would be generated with PHP. 
  Javascript would set this UL to not display. If not Javascript then UL/LI styled to show all error messages here. 
  Javascript would then use the LIs as the source of the error message data. 
  -->
  <ul id="form1_error_data">
     <li id="form1_error_data1">Foo required. </li>
     <li id="form1_error_data2">Bar required. </li>
  </ul>
</div>
 
<div>Foo</div>
<div><input type="text" name="foo" id="form1_value1"/></div>
<div id="form1_error1"><!-- error message from above put here by javascript --></div>
 
<div>Bar</div>
<div><input type="text" name="bar" id="form1_value2"/></div>
<div id="form1_error2"><!-- error message from above put here by javascript --></div>
 
</form>

Re: Alternative to form generation?

Posted: Wed Jul 15, 2009 3:10 am
by Eran
How would that work? normally you wouldn't display errors right off the bat. And then how'd they be accessible to Javascript?
You can't tell from PHP whether javascript is available or not, so you can't hide/show them accordingly

Re: Alternative to form generation?

Posted: Wed Jul 15, 2009 4:47 am
by Christopher
There wouldn't be and error text in the list to start with. It would just be:

Code: Select all

<form ... id="form1">
<div id="form1_error">
  <ul id="form1_error_data">
     <li id="form1_error_data1"></li>
     <li id="form1_error_data2"></li>
  </ul>
</div>
The Javascript could easily loop through the list and get the text. It would know which field the error is for by the ID. It would probably be better to use the field name rather than numbers like I did, so "form1_foo_error" and form1_bar_error". Just split it to figure out the form and field.

The PHP template would be:

Code: Select all

<form ... id="form1">
<div id="form1_error">
  <?php echo $error_list; ?>
</div>
It would be nice to do something similar with the form values, so you just put them in one place and the Javascript form handler would fill in the form for you. I guess you could just put JSON into a script next to the error messages. So:

Code: Select all

<form ... id="form1">
<div id="form1_error">
  <?php echo $error_list; ?>
  <script> <!--
     $form1 = <?php echo $form_json; ?>
  --></script>
</div>

Re: Alternative to form generation?

Posted: Thu Jul 16, 2009 9:02 am
by inghamn
Normally I'm very fond of including information as markup and having Javascript make it snazzier. However, for the purposes of client-side validatation, I'm not quite sure it makes sense to go through that extra effort. The reason is that without Javascript, you don't get client side validation, and thus would not need to the error messages at all.

I think that, for the purposes of having error messages available to displayed using Javascript, there's no reason to mark them up as HTML. Rather just include them as a javascript array or something.

Error messages that are reported during server-side validation would just be directly inserted into the output where necessary.