Hi,
I have an HTML page with a FORM and some input fields.
On the fields I wish to do validation as the punters change the field
values.
If they get it wrong, then I tell them and then wish to put
the focus back to the offending field.
( It works if a use an 'onblur' event but not an 'onchange' )
What mean is that the changing focus happens.
The 'onblur' is a pain because if a minimise the window and then bring
it back up, the validation function is called for each box during the
loading.
In practice I may have a form with up to 60 boxes and this would be a bit
of a drag.
eg:
Try the following file and enter an invalid number in either of the
number boxes then use the mouse ( or TAB key )
to move to a new box.
<html>
<head>
<link rel='stylesheet' href='/ripple-order/common/rip.css' />
<title>Submit a Ripple Order</title>
<script language="Javascript">
function validate_generic_numberField( dataRootDetails )
{
alert( "Entered 'validate_generic_numberField' field_name=["
+ dataRootDetails.name + "]" );
// expect dataRootDetails to be either the value of
// document.productDetails or document.serviceDetails
var v = dataRootDetails.value;
var fname = dataRootDetails.name;
var err = 0;
var errtext = "";
if( v.search(/[^0-9\.]/g) != -1 )
{ err = 1;
errtext = "Problem with field [" + fname + "]. \n\nValid chars
for a number field are :\n '0', '1', .., '9' and '.', '+', '-'\n";
}
if( err )
{
alert( errtext );
dataRootDetails.focus();
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form>
<table>
<tr>
<td valign="top" class="fdesc">A text field in here</td>
<td><textarea name="TextField1" rows="4"
cols="40"></textarea></td>
<td valign="top" class="ftype">Text</td>
</tr>
<tr>
<td valign="top" class="fdesc">A string field in here</td>
<td><input type="text" name="StringField1" value=""></td>
<td valign="top" class="ftype">String</td>
</tr>
<tr bgcolor="cyan">
<td valign="top" class="fdesc">Try alpha char here then move to
another box ( onblur event )</td>
<Comment>Note. Using the onblur event because the onchange event does not
seem to allow the focus to be re-set back offending field
</Comment>
<td><input type="text" name="numberField1"
onblur="validate_generic_numberField(this)" value="">
</td>
<td valign="top" class="ftype">Number [ ]</td>
</tr>
<tr>
<td valign="top" class="fdesc">Try alpha char here then move to
another box ( onchange event )</td>
<Comment>Note. Using the onblur event because the onchange event does not
seem to allow the focus to be re-set back offending field
</Comment>
<td><input type="text" name="numberField2"
onchange="validate_generic_numberField(this)" value="">
</td>
<td valign="top" class="ftype">Number [ ]</td>
</tr>
</table>
</body>
</html>
