onBlur madness!

E

Eric

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.theForm;

if (field.value != "") {
frm.field3.value = Number(frm.field1.value) +
Number(frm.field2.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;<input 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!
 
M

Michael Winter

[snip]

SCRIPT elements require a type attribute:

function validate(field) {
var frm = document.theForm;

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

var frm = field.form;
if (field.value != "") {
frm.field3.value = Number(frm.field1.value) +
Number(frm.field2.value);

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

<body>
<form name="theForm">

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

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

[snip]
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.

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
 
L

Lee

Eric said:
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.

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.
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,737
Latest member
Georgeengab

Latest Threads

Top