onblur validation focus

[apadley]

I have an AJAX application for a form that has 4 columns and 170 rows. It uses an onblur call to update a database each time you move out of a cell. This works fine.

Client wanted to validate for a number so I added a function to check for this and an alert call if the numer check failed. This works fine.

However, dismissing the alert results in the focus moving to the next cell rather than returning to the invalid cell. Big problem. I have been successful in hard coding focus to go to any other cell in the table except the one with the errror.

Here is the pertinent table code:

<td width="75">
<input type="text" name="depletions<?PHP echo $ti1; ?>" tabindex="<?PHP echo $ti1; ?>" id="depletions<?PHP echo $ti1; ?>" class="validate required depletions|<?PHP echo $id; ?> <?PHP echo $dbid; ?> usermsg depletions<?PHP echo $ti1; ?>" value="<?PHP echo $row['depletions']; ?>" size="8" /></td>
<td width="75">
<input type="text" name="endinginventory" tabindex="<?PHP echo $ti2; ?>" id="endinginventory" class="validate required endinginventory|<?PHP echo $id; ?> <?PHP echo $dbid; ?> usermsg" value="<?PHP echo $row['endinginventory']; ?>" size="8" /></td>

Here is the the function in my javascript file:

function validateMe(objInput) {

sVal = objInput.value; //get value inside of input field

sRules = objInput.className.split(' '); // get all the rules from the input box classname
sRequired = sRules[1]; // determines if field is required or not
sTypeCheck = sRules[2]; //typecheck are additional validation rules (ie. email, phone, date)
    gShow = sRules[4]; //gShow is the td id where feedback is sent to.
    sTable = sRules[3]; // database table to access
    sSource = sRules[5];
 
  if (isNaN (sVal)) {
    alert("Please enter a number.");
    document.form1.sSource.focus();
    return false;
    }
 
//sends the rules and value to the asp page to be validated
http.open("GET", sUrl + (sVal) + "&sRequired=" + (sRequired) + "&sTypeCheck=" + sTypeCheck +"&sTable=" + sTable, true);
 
http.onreadystatechange = handleHttpResponse; // handle what to do with the feedback
http.send(null); 
}

Any help in getting focus on the correct cell when the alert is dismissed will be greatly appreciated.

[artacus]

I'm not following how you are using an onBlur here without having it specified in your <input>. Anyhow you should be able to set focus with objInput.focus();

[apadley]

Thanks. However, I almost illiterate in this area. Are you suggesting that I code it like this:

    document.form1.objInput.focus()

If so, that didn't work. I get the same result as before. In other words, as soon as the alert is dismissed, focus moves to the next cell.

The onblur is contained in the following function in my javascript file.

function attachFormHandlers()
{
var form = document.getElementById('form1')

if (document.getElementsByTagName)//make sure were on a newer browser
{
var objInput = document.getElementsByTagName('input');
for (var iCounter=0; iCounter<objInput.length; iCounter++)
objInput[iCounter].onblur = function(){return validateMe(this);} //attach the onblur to each input field
}
form.onsubmit = function(){return validate();} //attach validate() to the form
}

Thanks for your help.

[artacus]

No. objInput should be a reference to your input field. The function is called like so:
(You could just add the onBlur when you are writing the input and get rid of the attachFormHandlers() call.

<input type="text" id="depletions100" ...snip... onBlur="validateMe(this);" />

So in your function
validateMe(objInput) <- objInput is referencing the input because of "this"

so you would just do:
objInput.focus();

[apadley]

Thanks. We are making progress. I made your suggested changes and it now works in some browsers, but not others. It works in IE 6 and Opera 9.02 on Windows XP. It works with Opera 9.02 on Mac. It's flaky with Safari 2.0.4 (requires you dismiss the alert 5 times before releasing the alert and returning focus to the correct cell). It fails in Firefox (all versions) on both Windows and Mac.

Any ideas on how to make this work in Firefox?

Thanks again.

[artacus]

After doing some googling, it appears that you need to set a small delay before setting focus in Firefox. I haven't tested it but try this:
[code]
setTimeout(function(){objInput.focus()}, 100);[/code]

[apadley]

Thanks. That was the solution.