onBlur madness!

Eric · Sep 17, 2004

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"> <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!

Michael Winter · Sep 17, 2004

[snip]

<script>

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

Lee · Sep 17, 2004

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.

I dont get this. Please help me!!	2	Jan 24, 2023
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
Reversing output of user input by using while loop...	2	Sep 1, 2022
browser compatibility: Javascript: onblur: Firefox vs. InternetExplorer	2	Jan 15, 2008
How can I remove the specific error message after regex validation is done?	1	Jan 25, 2023
Javascrip code wont run properly.	2	Oct 2, 2022
Help with code	0	Jun 12, 2022
Registration Form	7	Aug 30, 2023

onBlur madness!

Eric

Michael Winter

Lee

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads