forms: dependent element activation, validation and jquery. (o:

[Nil]

Ok, so I have a few problems I am interested in solving regarding
forms. First off I am just learning javascript and jquery and php.

1) I saw a form not too long ago that had elements dependent on
previous elements. eg. You click the newsletter check box on the form
and it actives newsletter specific form content that was previously
grayed out. I am interested in learning how to do this.

a) I am pretty sure I could figure out how to stuff the dependent
content into a separate div and hide it, but how was it grayed out and
then activated after a given input?
b) I am also slowly starting to learn jquery, is there a jquery
solution for this that works nicely (plugin or core module, either is
fine)

2) Validation with jquery. I've read through a few tutorials that
deal with the jquery plugin 'validation'. For the most part I have it
under control. The one thing I haven't figured out yet is how to
control where the error messages are being spit out.

As best I can see by default the plugin is adding a <label> tag and
dumping the message into that on a field by field basis. What I want
to learn how to do is dump the error messages into their own unique
pre-existing element. What I mean by that is I want each form element
to have it's set of errors be dumped into the DOM where ever I
choose. I hope that made sense?

Cheers,
Kory

 

[Thomas 'PointedEars' Lahn]

1) I saw a form not too long ago that had elements dependent on
previous elements. eg. You click the newsletter check box on the form
and it actives newsletter specific form content that was previously
grayed out. I am interested in learning how to do this.

a) I am pretty sure I could figure out how to stuff the dependent
content into a separate div and hide it, but how was it grayed out and
then activated after a given input?

(Supposedly) the `disabled' property of the (supposed) `textarea' element
object was changed (back) when the `click' event of the (supposed) checkbox
(<input type="checkbox" ...>) occurred. Probably (hopefully) it was changed
before, when the `load' event of the `body' element occurred (otherwise the
form would not be accessible).

b) I am also slowly starting to learn jquery,

Do not waste time with learning about somebody else's nonsense (except for
the purpose of learning how not to do it properly).

is there a jquery solution for this that works nicely (plugin or core
module, either is fine)

No, jQuery does not work (nicely).

2) Validation with jquery.

You do not need or want to use jQuery (for this). You only need to get a
minimum clue by reading the FAQ and following its recommendations.

<http://jibbering.com/faq/#posting>


PointedEars

 

[Garrett Smith]

Learing flow-of-control and OOP would be more valuable towards learning
web programming than learning somebody else's library.

Learning anothers' library seems not very valuable towards a goal
of understanding web programming technologies.

To put an error message into this element can be as easy as:

$("#error-messages-1").text("Error: Wrong data.");

Or you can enter HTML code. A very simple and rough example
could be:

$("#error-messages-1").html("Error: <strong>Wrong
data.</strong>");

The script has a non-l10n'd error message embedded in it directly.

Instead:

document.getElementById("error-messages-1").innerHTML =
Errors.wrongData;

Where the jsp contains:

Errors = {
wrongData : <fmt:message key="Choose"/>
};

I do not know how this works in PHP, but it is probably messier and more
of a pain in the ass (that is PHP).

The issue of HTML in the error message remains. L10N must not include
HTML. The error message could be written as:

"Wrong data"

Various strategies for displaying the desired HTML, so long as

There are many alternative ways to do the same thing. For
example, you could add the error display element dynamically,
only when it is needed.

That would avoid the HTML errors in your earlier example (ETAGO in
inline script)[1]

Of course you can do all this without jQuery as well. You need
more code,

L10N strategies don't really have anything to do with jQuery.
[1]http://www.w3.org/TR/REC-html40/appendix/notes.html#notes-specifying-data