Click to See Complete Forum and Search --> : Validating a text field using Netscape7.2
erick30
04-18-2006, 10:49 AM
I have a text field validation that is triggered with an ‘onBlur’ event, then the validation refocus in case the value in the text field isn’ t correct and is returned ‘false’ so that the user can’ t submit the form. If the value is correct then the validation returns true so that the user can submit the form normally.
This mechanism woks fine in IE, but not in Netscape7.2 which despite the value isn’ t correct in the text field the user can submit the form.
How can I solve this problem?
This is the code sample:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--//
function check_field25() {
var cal_min = document.my_form.caliber_min.value
if (cal_min == "0") {
alert("You must enter a value greater than 0.")
setTimeout(function() {document.my_form.caliber_min.focus();},20);
return false;
}
return true;
}
// -->
</script>
</head>
<body>
<form name="my_form">
<input name="caliber_min" type="text" maxlength="8" id="caliber_min" onBlur="check_field25();" width="50"><br>
<input type="text" width="100"><br><br>
<input type="submit" value="Submit the form">
</form>
</body>
</html>
Other ideas and/or alternatives also will be welcomed,
Thank you
felgall
04-18-2006, 04:41 PM
You are only checking on leaving the field itself. You need to add onsubmit="return check_field25()" to the form tag if you want the validation to stop the form being submitted.
erick30
04-18-2006, 05:03 PM
Hello,
If I use only 'onSubmit' I can' t use alternatively ‘onBlur’.
I would prefer to validate after fill every field because the form is long, and it’ s more comfortable for the user correct the ‘mistake’ immediately when still has the field and its meaning in his/her mind, instead of having to find which field was incorrect, rethink which was the meaning and rethink which was the value the user wanted for it, so, go 10 or 15 fields back. And perhaps the same for 3 or 4 fields.
What’ s your opinion?
erick30
04-19-2006, 05:16 AM
I am very surprised that a practice that is highly recommended in the JavaScript Bible of Danny Goodman, is almost unknown by the majority of users of JavaScript forums.
-Extracted directly form JavaScript Bible of Danny Goodman-
Real-time validation triggers
The most convenient time to catch an error is immediately after the user makes it – especially for a long form that requests a wide variety of information.
…
Backward-compatible text boxes have two potential event handlers for this purpose: onChange and onBlur. I personally avoid onBlur event handlers,…
…
Because a user can defeat the onChange event handler trigger, I recommend you also perform batch validation prior to submission.
…
And in the onChange event handler definition starts saying:
Of all the event handlers for a text object, you will probably use the onChange handler the most in your forms (see Listing 25-6). This event is the one I prefer for triggering the validation of whatever entry the user just typed in the field. …
I tested what the JavaScript Bible explains (also with some examples) and the validation with onChange event handler really works fine in IE and NN. After that, I make a final validation when user submits the form (re-checking again all the fields), and works in IE and NN. The only thing I see in Netscape is if the user clicks the submit button with a no valid value in the text field, then seems to be an endless loop, to stop the loop the user has to click the alert twice.
This is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--//
function check_field25() {
var cal_min = document.my_form.caliber_min.value
if (cal_min == "0") {
alert("You must enter a value greater than 0.")
document.my_form.caliber_min.focus()
return false;
}
return true;
}
function lastCheck() {
if (check_field25()) {return true;}
return false;
}
// -->
</script>
</head>
<body>
<form name="my_form" onSubmit="return lastCheck();">
<input name="caliber_min" type="text" maxlength="8" onChange="check_field25();" id="caliber_min" width="50"><br>
<input type="text" width="100"><br><br>
<input type="submit" value="Submit the form">
</form>
</body>
</html>
Any suggestion to solve this little bug..?
Thanks
the function lastCheck() looks redundant to me. Why not simply
onsubmit = "return check_field25()"
?
erick30
04-19-2006, 09:22 AM
Hi Kor,
What you said doesn’ t solves the problem.
Did you tried my last code using Netscape? The code is complete, without bugs, only copy and paste. Then you will see the endless loop after type ‘0’ in the text field and click the button.
Do you know how can I eliminate this endless loop?