onBlur madness!

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Eric
    #1

    onBlur madness!

    Hello,

    I'm having trouble with a bit of code that is both validating and
    updating fields on the fly. Here's something similar to my code:
    -----------
    <script>
    function validate(field) {
    var frm = document.theFor m;

    if (field.value != "") {
    frm.field3.valu e = Number(frm.fiel d1.value) +
    Number(frm.fiel d2.value);
    } else {
    alert("Field is empty.");
    }
    }
    </script>

    <body>
    <form name="theForm">
    Field 1 <input name="field1" type="text" onblur="return
    validate(this)" >
    <br><br>
    Field 2 <input name="field2" type="text" onblur="return
    validate(this)" >

    <br><br><br>
    Total <input name="field3" type="text">
    <br><br>
    <input type="button" value="Validate ">&nbsp;<in put type="button"
    value="Cancel" onClick="window .location.href= 'http://www.google.com' ;">

    -----------

    So, I need to

    1. Have the "Total" field update whenever a user changes a value in
    field 1 or field 2.
    2. Perform some validation on those fields
    3. Have the onblur and validation NOT fire when the user clicks the
    Cancel button.

    Problem: click in the first field, don't enter a value, then try to
    press Cancel - the validation is happening, and I don't want it to.

    This third point above seems to be the kicker. Anyone know a way I
    can go from a text field to clicking the "Cancel" button without
    firing the onBlur event? I normally don't like doing validating
    on-the-fly like this, but my application has the requirement of
    updating that Total box dynamically, so I have to perform field-level
    validation as I go. Thoughts?

    Thanks!
    Tags: None
    • Lee
      #2
      Re: onBlur madness!

      Eric said:
      [color=blue]
      >1. Have the "Total" field update whenever a user changes a value in
      >field 1 or field 2.
      >2. Perform some validation on those fields
      >3. Have the onblur and validation NOT fire when the user clicks the
      >Cancel button.[/color]

      One way to implement precognition is to delay the validation
      for about a tenth of a second via setTimeout(), and have the
      Cancel button clear the timer so the validation never happens.

      Validating onBlur is almost always a bad idea, because there
      are so many things that can cause a field to lose focus.
      Popping up an alert(), for example. It's better to use
      onChange, if at all possible.

      You're going to want to sum your fields again on the server
      side, because it's too easy for users to bypass your code
      and submit bogus numbers.

        Comment

        • Michael Winter
          #3
          Re: onBlur madness!

          On 17 Sep 2004 15:04:46 -0700, Eric <ericsingley@ho tmail.com> wrote:

          [snip]
          [color=blue]
          > <script>[/color]

          SCRIPT elements require a type attribute:

          <script type="text/javascript">
          [color=blue]
          > function validate(field) {
          > var frm = document.theFor m;[/color]

          All form controls have a property, form. This provides a reference to the
          containing form, making the name attribute unnecessary.

          var frm = field.form;
          [color=blue]
          > if (field.value != "") {
          > frm.field3.valu e = Number(frm.fiel d1.value) +
          > Number(frm.fiel d2.value);[/color]

          If you're going to validate values, actually check that the user entered
          numbers before trying to perform any arithmetic.
          [color=blue]
          > } else {
          > alert("Field is empty.");
          > }
          > }
          > </script>
          >
          > <body>
          > <form name="theForm">[/color]

          As I said above, the name attribute is unnecessary if you use the form
          property.
          [color=blue]
          > Field 1 <input name="field1" type="text" onblur="return
          > validate(this)" >[/color]

          Don't use the blur event for field validation. Use change.

          [snip]
          [color=blue]
          > 1. Have the "Total" field update whenever a user changes a value in
          > field 1 or field 2.
          > 2. Perform some validation on those fields
          > 3. Have the onblur and validation NOT fire when the user clicks the
          > Cancel button.[/color]

          The first two are easy, but the third is all but impossible by
          conventional means. The field-fired events, whether you use blur or
          change, will occur before the click event is fired. About the only
          work-around is to delay the validation, giving the click event time to
          occur and cancel it. However, that's a horrible solution and potentially
          unreliable.

          One possibility is to update the defaultValue property and make the Cancel
          button a reset type, or something similar. Storing the value in a custom
          property, perhaps. When the button is clicked, the stored values can
          replaced those that have been changed, but it leaves one crucial issue:
          how do you determine what constitutes a committed value with out expressly
          requiring user action? A Calculate button, for example.

          [snip]

          Mike

          --
          Michael Winter
          Replace ".invalid" with ".uk" to reply by e-mail.

            Comment

            Previous template Next
            Working...