Anomaly: onblur handling AND advice on validation

Discussion in 'Javascript' started by Emmes, Jan 29, 2008.

  1. Emmes

    Emmes Guest

    Hi;

    If this is not the proper place to ask these questions please accept
    my apologies in advance and please let me know where the proper place
    to ask these questions is.

    First, it isn't necessary but I was interested in getting an opinion
    from mozilla developers. Do they read this group? Like I said, it
    doesn't matter just curious.

    My company is using:
    - Firefxo 2.0.0.11
    - Internet Explorer 7.0.5730.11
    - Windows XP Professional Service Pack 2

    My company has a large web application that has been coded to IE,...
    for years.

    We are now trying to do the right thing by making our code work in
    both the Mozilla family of browsers ( and get W3 compliance ) and
    Internet Explorer.

    We know it isn't the best/right way to do things, but our customers
    specifically demand that our web application has large HTML forms
    ( sometimes 200 fields ) and that validation for each field takes
    place as the user fills out each field. Additionally are users want
    processing to happen the same whether or not the user likes to mouse
    our keyboard through the forms via tabbing.

    These customer mandated constraints and being cross browser compliant
    are our only concerns. Whatever fills both sets of demands we are
    happy to run with it. I would welcome any advice in this regard.

    Our web application is currently doing javascript validation by
    attaching javascript functions to the onblur event of each HTML field
    on our large forms.

    Our problem in going cross browser is that Internet Explorer and
    Firefox handle onblur events in combination with form submission
    differently.

    I'm pasting two SMALL example HTML files into this message. I
    realize it may get messy so I am separating each example HTML file
    with a "====" line so anyone interested can copy out the code in
    between the "====" lines and paste it into a text editor.

    In the first example HTML file we have a text field and a submit
    button.

    The text field has a validation function connected to the onblur event
    to go execute when when someone leaves the text field.

    In IE if the user mouses out of the text field and clicks the submit
    button the onblur processing will fire first and the form will not
    submit until that processing is done. This is what we need and want
    to happen in FF as well.

    However, in FF if the user mouses out of the text field then clicks
    submit form submission and onblur processing will happen
    simultaneously ( or submission happens first ).

    We also noticed that if the user moves focus off of the prompt box
    ( or an alert ) and then tries to make it go away, it won't. FF
    seems to be caught in a loop.

    In the second example HTML file pasted into this message we came up
    with a work around to make FF behave like IE. We get around the loop
    problem by having onblur processing going to the onchange handler. We
    then add further process to the onchange handler to set a flag for
    submission to "false" until we are read to submit.

    We want to make our web application Mozilla compliant in the most
    intelligent way we can while keeping with our customer's demands that
    each field is validated __as the field is filled in__.

    Can anyone suggest a more intelligent way, than our workaround to do
    validation of large HTML forms ( 200 plus fields ) and/or get around
    the loop problem of the onblur event?

    Thanks much in advance for any information or opinions.

    Steve

    =======================================================
    Example 1: HTML file to copy and paste: The problem
    =======================================================
    <html>
    <head>
    <title>Demonstrate different onblur event handling, FF vs IE </
    title>


    <script>
    <!--
    function procApple()
    {
    alert("processing procApple(): ");

    var typeApple = document.form1.apple.value;

    if(typeApple != 'gala')
    {
    prompt("I only eat Gala Apples, please type \"gala\"","");
    return false;
    }
    return true;
    }

    //-->

    </script>

    </head>

    <body background = "white">


    <form name = "form1" action = "http://www.google.com">


    Name a type of Apple:
    <input type = "text" id = "apple" name = "apple"
    onBlur="procApple()">
    <br>
    <br>

    <input type = "submit" name = "submitButton" value = "submit">


    </form>

    </body>
    </html>
    =======================================================
    Example 2: HTML file to copy and paste: Our workaround
    =======================================================
    <html>
    <head>
    <title>Test differences in onblur processing FF vs IE</title>


    <script>
    <!--

    // Global variables


    var formSubmitAllowed = true; // Allow the form to be submitted?


    //-----------------------------------------------------------------------------
    // Provide validation of a field IMMEDIATELY after a user leaves it
    function procApple()
    {

    //alert("processing procApple()");

    var typeApple = document.form1.apple.value;

    if ( typeApple != 'gala' )
    {
    prompt("I only eat Gala Apples, please give me a Gala","");
    return false;
    }

    return true;


    }
    //-----------------------------------------------------------------------------
    // Sumbit the form, go to another URL ( google )
    function wsubmit()
    {
    document.form1.action = "http://www.google.com/";
    document.form1.method = 'post';
    document.form1.submit();
    return false;
    }
    //-----------------------------------------------------------------------------
    // To be excuted AFTER HTML elements have had a chance to be rendered
    to the
    // page
    function overrideEvents()
    {

    var formElement; // holder

    // For each HTML form element
    for ( var i=0; i < document.form1.elements.length; i++ )
    {

    formElement = document.form1.elements;


    if ( formElement.type == 'text' )
    {

    formElement.onchange = formElement.onblur
    formElement.onblur = '';
    formElement.oldchange = formElement.onchange;
    formElement.onchange = newchange;

    }

    else if ( formElement.type == 'button' )
    {
    formElement.oldclick = formElement.onclick;
    formElement.onclick = newclick;
    }

    }

    }
    //----------------------------------------------------------------------------
    function newchange ()
    {

    // Note1 - srussell: If an alert() comes before the flag for
    submission
    // is set to false, the chain of processing will be disrupted and
    the
    // form will submit anyway.

    // alert("processing newchange() before \"formSubmitAllowed =
    false;\"" +
    // "\nThis will break proper processing");


    formSubmitAllowed = false;

    //alert("processing newchange() ");
    this.oldchange();
    formSubmitAllowed = true;
    }

    //----------------------------------------------------------------------------
    function newclick()
    {
    // call real submit function
    if ( formSubmitAllowed )
    {
    this.oldclick();
    }
    }
    //-----------------------------------------------------------------------------

    //-->
    </script>

    </head>

    <body background = "white">


    <form name = "form1" action = "" >


    Name a type of apple ( must be Gala ):
    <input type = "text" id = "apple" name = "apple"
    onBlur="procApple()">
    <br>
    <br>

    <input type = "button" id = "submitButton" name = "submitButton"
    value = "submit" onclick = "wsubmit();" >


    </form>

    <script>
    <!--
    // Set up custom javascript event handling AFTER all of the HTML
    elements
    // have had a chance to render ( big form, dynamically writting HTML
    with JS,
    // etc...
    overrideEvents();

    -->
    </script>

    </body>
    </html>
     
    Emmes, Jan 29, 2008
    #1
    1. Advertisements

  2. Emmes

    RobG Guest

    I think that is the "best/right way to do things", provided validation
    waits until I actually leave the field and doesn't stop me from going
    to the next (or any other) field. It should just put a message in the
    page to let me know the field I left isn't valid.
    That is easy enough.
    The problem stems from using onblur with an alert dialog - never a
    good idea.

    A simple solution is to write errors to the page, not to an alert
    dialogue, then you can run the same validation onbur and onsubmit - it
    doesn't matter if it runs twice occasionally. Then you can do your
    validation onchange or onblur (but be careful of radio buttons...).
    Remember to validate all your fields onsubmit and cancel submit if one
    fails.

    The following is play code based on your post to demonstrate the
    concept, once you decide to put error messages unobtrusively in the
    page, you can run validation whenever you like without interrupting
    the user.

    <title>Demonstrate different onblur event handling, FF vs IE </
    title>

    <style type="text/css">
    .errMsg { font-weight: bold; color: red;}
    </style>

    <script>

    function procApple(el) {
    // alert("processing procApple(): ");
    var typeApple = el.value;

    if(typeApple != 'gala') {
    wErr(el, 'I only eat Gala Apples, please type "gala"');
    return false;
    }
    return true;
    }

    function wErr(el, msg) {
    var errEl = document.getElementById(el.id + '_errMsg');
    errEl.innerHTML = msg;
    }

    </script>

    <form name = "form1" action = "http://www.google.com"
    onsubmit="return procApple(this.apple);">

    <label for="apple">Name a type of Apple:<span
    id="apple_errMsg" class="errMsg"></span>
    <br>
    <input type="text" id="apple" name="apple"
    onblur="procApple(this)"></label>

    <input type="submit">
    </form>
     
    RobG, Jan 30, 2008
    #2
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.