How can I return focus to a field that has failed validation? Options

[Douglas McKibbin]

If data entered into a field fails a validation function, "CheckLastname" I want to return focus to the field after an alert message. I can't seem to get this to work. Focus returns to the next field, "personal_firstname". I have tried a few different methods, none work. Users might use IE, Safari or Firefox. I am troubleshooting in Safari v3. Thanks for any help with what seems like a simple question.

Doug

<form name="PatientEntry" method="POST" action="https://secure.mailjol.net/allforms/u/b3a4abc5.php" onsubmit="validate(personal_SS.value,personal_SS.id,personal_lastname.value,personal_lastname.id,personal_firstname.value,personal_firstname.id,personal_Birthdate.value,personal_Birthdate.id)">
<P>
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Last Name: <INPUT name="personal_lastname" id="personal_lastname" type="text" onfocus="HighlightRed(this.id)" onblur="CheckLastname(this.value,this.id)" tabindex=1>
First Name: <INPUT name=personal_firstname id="personal_firstname type="text" onfocus="HighlightRed(this.id)" onblur="CheckFirstname(this.value,this.id)" tabindex=2>



function CheckLastname(strng,x)
{
if (strng == "") {alert("You didn't enter a last name");
document.PatientEntry.getElementById("x").focus();
document.PatientEntry.getElementById("x").select();
Return;
}
else
{
if ((strng.length<3) || (strng.length>14)) {alert("The Last name is the wrong length.");
document.PatientEntry.x.focus();
Return;
}
else
{
var illegalChars=/\W/;
if (illegalChars.test(strng)) {alert("The Last name contains illegal non alphabetic characters.");
document.PatientEntry.x.focus();
Return;
}
}
}
document.PatientEntry.personal_InsuredLastname.value=document.PatientEntry.personal_lastname.value;
document.PatientEntry.personal_CoinsuredLastname.value=document.PatientEntry.personal_lastname.value;
HighlightWhite(x);
}

[Christian J]

CODE

document.PatientEntry.getElementById("x").focus();

The above looks for an element with the ID "x". To make it look for the function parameter "x" you must remove the quotes. Also remove the "PatientEntry" part, since getElementById() applies to document, not the form's name:

CODE

document.getElementById(x).focus();

[zgillman]

remove the patiententry part and it should work i think

[zgillman]

whoops, he already said that.. well okay touché

[Douglas McKibbin]

CODE

document.PatientEntry.getElementById("x").focus();

The above looks for an element with the ID "x". To make it look for the function parameter "x" you must remove the quotes. Also remove the "PatientEntry" part, since getElementById() applies to document, not the form's name:

CODE

document.getElementById(x).focus();

Thanks Christian. This works fine in Safari but does not return focus in IE v7 nor in FF. I tried the following code but that didn't work either. I think I have to insert a delay somewhere .....

function CheckLastname(strng,x)
{
if (strng == "") {alert("You didn't enter a last name");
setTimeout('document.getElementById(x).select()', 1000);
document.getElementById(x).focus();
setTimeout('document.getElementById(x).select()', 1000);
Return;
}


What is the problem with IE and FF?

[Christian J]

Some other issues I found, but they don't seem to be related to FF's lack of focus:

CODE

First Name: <INPUT name=personal_firstname id="personal_firstname type="text"

The ID lacks the closing quote. Also the FIELDSET and FORM lack their closing tags.

In the script it seems the brackets don't match. I like the kind of code formatting used below, since it makes it easier to see where various parts belong:

CODE

if (strng == "")
{
    alert("You didn't enter a last name");
    document.getElementById(x).focus();
    document.getElementById(x).select();
    return;
}

else if((strng.length<3) || (strng.length>14))
{
    alert("The Last name is the wrong length.");
    document.PatientEntry.x.focus();
    return;
}

Also I believe the "return" statement must be lower case.

BTW some people may have last names shorter than 3 or longer than 14 characters.

[Christian J]

I think I have to insert a delay somewhere .....

That might work. But even then the onblur event causes a loop until the user enters something in the field that the script accepts. What if the name is "Li" or "MacGhilleseatheanaich", or if the user changes his mind about filling in the form?

If you instead change the background color of the form field instead of focusing it you should avoid both problems.

[Douglas McKibbin]

Christian, Thank you very much.
I corrected the id typo.
I didn't put up all of the html code, those tags are closed.
Changed to lowercase "return;".
Your suggestion to make the code more readable was a good one, I did that too ... looks much nicer and easier to follow.
But I cannot force either IE or FF to return focus. I see from googling Dynamic Drive Forums that this is a problem ... I think you yourself even addresed it with a "ZinMaster" ... not sure of the outcome, but the issue of injecting a delay in the JS code either before or after the document.getElementById(x).focus(); line was discussed using the setTimeout statement above. I am going to take your suggestion to resume user access and just switch to changing the background color instead of flailing away at trying to return focus.
You have been very generous with your time. I certainly appreciate it.
Doug

[Christian J]

Afraid I haven't been very helpful here, lets blame it on the New Year. The proper way to validate a form is in the server-side script (since otherwise a user without JS may cause all kinds of trouble).

In addition one may use client-side JS, if so the most reliable way might be to use the ONSUBMIT event in the FORM tag. Then the fields will be checked one at the time after the user tries to submit the form. While it might be more elegant to check each separate field immediately after it was filled in, at least the focusing in the script below should work in FF and you'll avoid alert box loops:

CODE

<script type="text/javascript">
function validate(foo)
{

    if(foo.firstname.value=="")
    {
        alert("You didn't enter a first name");
        foo.firstname.focus();
        return false;
    }

    if(foo.lastname.value=="")
    {
        alert("You didn't enter a last name");
        foo.lastname.focus();
        return false;
    }

    return true;
}
</script>

<form action="..." onsubmit="return validate(this);">
<input type="text" name="firstname" value="">
<input type="text" name="lastname" value="">
<input type="submit" value="Send">
</form>