Validating a text field using Netscape7.2

ericnet · Apr 18, 2006

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:

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.")
	 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" [b]onBlur="check_field25();"[/b] 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

kaht · Apr 18, 2006

Do your form validation with the onsubmit handler of your form. This will work in all browsers and is, for the most part, the most common way to perform form validation. Just make sure to return the value in your onsubmit call - which I've shown below in blue. That's a common mistake.

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;
}

// -->
</script>

</head>
<body>
<form name="my_form" [!]onsubmit="[blue]return[/blue] check_field25();"[/!] >

<input name="caliber_min" type="text" maxlength="8" id="caliber_min" width="50"><br>
<input type="text" width="100"><br><br>
<input type="submit" value="Submit the form">
</form>
</body>
</html>

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

ericnet · Apr 18, 2006

Hi,

But I don’ t need to use onSubmit to do so.. simply adding an onClick event in the submit button this is possible. The point is I want to validate fields just after the user has filled them, because the form is quite long. If I validate all the form at a time (with an onSubmit or onClick) I would’ t have this problem.

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.

kaht · Apr 18, 2006

and is, for the most part, the most common way to perform form validation

This holds true even for long forms. If you want to validate the fields as they are being filled out then onblur is your most common option. As for why it doesn't work in netscape 7.2, no clue - I don't use it. But I really don't think your users are going to find it unreasonable if their info doesn't get validated until the form is complete - especially if you are highlighting the field they need to correct, and setting focus to the field for them. As I stated above, it is, for the most part, the most common way to perform form validation.

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

ericnet · Apr 19, 2006

I appreciate very much your point of view, seriously.
Anyway, I must tell you that 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:

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>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Validating a text field using Netscape7.2

ericnet

Programmer

kaht

Programmer

ericnet

Programmer

kaht

Programmer

ericnet

Programmer

Similar threads

Part and Inventory Search

Sponsor