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

Discussion in 'Javascript' started by Nil, Oct 24, 2009.

  1. Nil

    Nil Guest

    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
     
    Nil, Oct 24, 2009
    #1
    1. Advertising

  2. Nil wrote:

    > 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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Oct 24, 2009
    #2
    1. Advertising

  3. Hans-Georg Michna wrote:
    > On Fri, 23 Oct 2009 20:59:13 -0700 (PDT), Nil wrote:
    >
    >> 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.
    >>


    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
    HTML tags (e.g. "<strong>...</strong>") is not passed off to
    translators.

    > 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
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, Oct 27, 2009
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Marine
    Replies:
    3
    Views:
    23,726
    Marine
    Feb 15, 2006
  2. puzzlecracker
    Replies:
    1
    Views:
    541
    James Kanze
    Aug 7, 2008
  3. Aaron Gray
    Replies:
    20
    Views:
    420
    Lasse Reichstein Nielsen
    Jul 27, 2008
  4. David Mark
    Replies:
    11
    Views:
    489
    NickFitz
    Dec 14, 2009
  5. lorlarz
    Replies:
    6
    Views:
    228
    David Mark
    Mar 25, 2010
Loading...

Share This Page