help with data validation

Discussion in 'Javascript' started by Jim Wooseman, Aug 5, 2008.

  1. Jim Wooseman

    Jim Wooseman Guest

    I'm trying to use Greasemonkey to add form validation to some Web pages
    (whose construction is otherwise out of my control). To boil it down to
    a simple test case, the combination of the original HTML and my script
    results in something like...

    <html>
    <head>
    <title>Validator test</title>
    <script type="text/javascript"><!--
    function Loaded () {
    var theField = document.getElementById ('field1') ;
    theField.addEventListener ('change', validCk, false) ;
    }
    function validCk (e) {
    if (!/([a-c])/.test (this.value) ) {
    alert ('You must enter a, b, or c in this field.') ;
    e.preventDefault () ;
    e.stopPropagation () ;
    this.focus () ;
    return false ;
    }
    }
    // --></script>
    </head>
    <body onload="Loaded();">
    <form action="http://www.example.com/submitted/">
    <input id="field1" maxlength="1" size="1" type="text" />
    <input id="submit1" type="submit" value="Go" />
    </form>
    </body>
    </html>

    Steps to reproduce the problem:
    - Cut and paste the above HTML into a file, and load it into Firefox.
    - Enter "Q" in the text field.
    - Without hitting the Tab key or otherwise exiting the text field, click
    the "Go" button.

    Expected result:
    - The warning box pops up, and when the user dismisses it, the cursor is
    back in the text field.

    Observed result:
    - The warning box pops up, but before the user dismisses it, the form is
    submitted anyway.

    Now, I understand that preventDefault() and stopPropagation() are
    affecting field1 and not submit1, but why not? Shouldn't canceling an
    event cancel ALL the effects of that event? More to the point, how can
    I ensure that the "submit" effects ARE canceled, and how can I do it
    when the actual page could have several dozen submit buttons, in guises
    such as...

    <a href="javascript:forms[0].submit()">Go</a>

    <a href="javascript:__doPostBack('foo2','bar2')">Go</a>

    <a onclick="__doPostBack('foo3','bar3')">Go</a>

    <select onchange="javascript:__doPostBack('foo4','bar4')">
    <option>!Go</option>
    <option>Go!</option>
    </select>

    <a href="javascript:void(0)" id="anchor5">Go<script
    type="text/javascript"><!--
    var a5 = document.getElementById ('anchor5') ;
    a5.addEventListener ('click', function () {
    __doPostBack ('foo5', 'bar5')
    }, false) ;
    --> </script></a>

    ....???
    Jim Wooseman, Aug 5, 2008
    #1
    1. Advertising

  2. Jim Wooseman wrote:

    > var theField = document.getElementById ('field1') ;
    > theField.addEventListener ('change', validCk, false) ;
    > }
    > function validCk (e) {
    > if (!/([a-c])/.test (this.value) ) {
    > alert ('You must enter a, b, or c in this field.') ;
    > e.preventDefault () ;


    See
    http://www.w3.org/TR/2000/REC-DOM-L.../events.html#Events-eventgroupings-htmlevents,
    the change event is not cancelable so that preventDefault() does not help.


    > More to the point, how can
    > I ensure that the "submit" effects ARE canceled, and how can I do it
    > when the actual page could have several dozen submit buttons, in guises
    > such as...


    If you want to cancel form submission by a submit button then you should
    add an event listener for the submit event to the form itself. The
    submit event can be cancelled so that listener should call
    e.preventDefault() if you don't want the form to be submitted.

    However note that calling the submit method of a form does not raise the
    submit event.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Aug 5, 2008
    #2
    1. Advertising

  3. Jim Wooseman

    Jim Wooseman Guest

    Martin Honnen wrote:

    > However note that calling the submit method of a form does not raise the
    > submit event.


    Then that does me no good, because 90% of the "Go" links on this page
    call submit(), either directly or via __doPostBack(). :(
    Jim Wooseman, Aug 6, 2008
    #3
  4. Jim Wooseman wrote:
    > Martin Honnen wrote:
    >> However note that calling the submit method of a form does not raise the
    >> submit event.

    >
    > Then that does me no good, because 90% of the "Go" links on this page
    > call submit(), either directly or via __doPostBack(). :(


    Make them submit buttons and extend the form to include them. This is also
    the accessible approach.


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
    Thomas 'PointedEars' Lahn, Aug 6, 2008
    #4
  5. Jim Wooseman

    David Mark Guest

    On Aug 5, 8:04 pm, Jim Wooseman <> wrote:
    > Martin Honnen wrote:
    > > However note that calling the submit method of a form does not raise the
    > > submit event.

    >
    > Then that does me no good, because 90% of the "Go" links on this page
    > call submit(), either directly or via __doPostBack(). :(


    That's what happens when you use incompetently designed frameworks
    (e.g. ASP.NET.)
    David Mark, Aug 6, 2008
    #5
  6. Jim Wooseman

    Jim Wooseman Guest

    Thomas 'PointedEars' Lahn wrote:

    > Make them submit buttons and extend the form to include them. This is also
    > the accessible approach.


    That _would_ be The Right Thing to do, but it's also a lot of work for a
    Greasemonkey script.
    Jim Wooseman, Aug 7, 2008
    #6
  7. Jim Wooseman

    Jim Wooseman Guest

    David Mark wrote:

    > That's what happens when you use incompetently designed frameworks
    > (e.g. ASP.NET.)


    I know, but I didn't pick it, I just use the site.
    Jim Wooseman, Aug 7, 2008
    #7
    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. Colin Mackay
    Replies:
    0
    Views:
    2,687
    Colin Mackay
    Jun 25, 2003
  2. Libs
    Replies:
    0
    Views:
    1,491
  3. Colin Basterfield

    Web form validation vs object validation

    Colin Basterfield, Nov 28, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    425
    Tommy
    Nov 29, 2003
  4. Matt
    Replies:
    14
    Views:
    4,095
    Chad Z. Hower aka Kudzu
    Jan 30, 2004
  5. Lucas Tam
    Replies:
    2
    Views:
    1,107
    Lucas Tam
    Feb 26, 2004
Loading...

Share This Page