Been doing some more investigating.....goddamn am I confused.
anwyays, heres a full code dump.....if it doesn't make sense to you, your
not the only one....
but trying to come up with something that works in all browser/os
combinations, however has to be easy to update/change what validation has to
be done without editing the JavaScript source (thus the onBlur functions)
etc.
ps...word wrap may well screw up some of the comments etc
www.wtf.net.au/temp/javascript.html
so there it is uploaded.
--
<html>
<head>
<script language="JavaScript">
<!---
// globals, might seem like these aren't needed, but they need to be passed
between multiple functions and without being passed by the function call
var submitted = '0';
var i = 0;
var elements;
var errorList;
function checkIsNum(inputValue,extras,min,max) {
if (submitted == "1") { // only execute on the form submit, not via
tabbing out etc
if (inputValue.length != 0) {
inputValue = inputValue.value;
var validChars = "0123456789" + extras;
var IsNumber;
var i;
IsNumber = true;
for (i = 0; i < inputValue.length && IsNumber == true; i++) {
checkCar = inputValue.charAt(i);
if (validChars.indexOf(checkCar) == -1) {
IsNumber = false;
errorList = errorList + 'Error: ' + inputValue + ' must be a number\n'
}
}
}
}
}
function checkNotNull(inputValue,fieldName) {
if (submitted == '1') { // only execute on the form submit, not via
tabbing out etc
valueToCheck = inputValue.value;
if (valueToCheck.length == 0) {
errorList = errorList + 'Error: ' + fieldName + ' cannot be empty\n';
}
}
}
function checkLength(toCheck,maxLength) {
if (submitted == '1') { // only execute on the form submit, not via
tabbing out etc
toCheck = document.form.number.value;
if (toCheck.length > maxLength) {
errorList = errorList + 'Error: ' + inputValue.value + ' must be less
than ' + maxLength + ' characters long\n';
}
}
}
// might seem like a stupid process, but I'm trying to make something where
the function can stay static and if you want to add a validation to a form
field, then you just add it on the onChange function, thusly when you submit
the form, it just loops thru the fields and gives them focus, then moves
onto the next object in effect making them execute their onBlur functions
(also explains the submitted variable).
// Issue seems to be that during the for (i = 0; i <= formElements; i++)
loop, it does everything OK, but it buffers the focus() commands until
after the function is finished, thus explaining why the variable doesn't get
added to....it does, just not until its too late!
function formSubmit() {
errorList = 'Issues with the form are...\n\n';
submitted = '1'; // tell the function that it needs to be processed
formElements = document.forms[0].length -1; // assume submit button is last
element, we don't need to check this
for (i = 0; i <= formElements; i++) { // loop thru the list of fields
eval('document.forms[0].elements[' + i + '].focus()'); // tell the item to
loose focus incase its got a check that needs to be executed
}
if (errorList == 'Issues with the form are...\n\n') {
submitted = '0'; // reset to 0 so it doesn't get executed on a non-form
submit
return true; // submit form, check was OK
} else {
alert (errorList); // show what the issues were
submitted = '0'; // reset to 0 so it doesn't get executed on a non-form
submit
return false; // die form, die!
}
}
//-->
</script>
</head>
<body>
<form name="form" method="post" onSubmit="return formSubmit();">
<input type="text" name="number" onBlur="checkNotNull(this,'Field 1');
checkIsNum(this,'./;'); checkLength(this,5)"><br>
<input type="text" name="number2" onBlur="checkNotNull(this,'Field 2');
checkIsNum(this,'./;'); checkLength(this,4)"><br>
<input type="text" name="number3" onBlur="checkNotNull(this,'Field 3');
checkIsNum(this,'./;'); checkLength(this,3)"><br>
<input type="text" name="number4" onBlur="checkNotNull(this,'Field 4');
checkIsNum(this,'./;'); checkLength(this,2)"><br>
<input type="submit" name="submit">
</form>