By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,452 Members | 974 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,452 IT Pros & Developers. It's quick & easy.

onBlur madness!

P: n/a
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!
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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.

Jul 23 '05 #2

P: n/a
On 17 Sep 2004 15:04:46 -0700, Eric <er*********@hotmail.com> wrote:

[snip]
<script>
SCRIPT elements require a type attribute:

<script type="text/javascript">
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.