I have written the following code and I want that when a user doesn't fill his first name and mothertongue then it'll show the error message. But whats happening is that after showing the alert for the FirstName alert its directly going to the MotherTongue box. Its not even allowing to fill the LastName before MotherTongue is filled. Why is this happening? Please help me to overcome the problem.

details.html

<html>
<head>
<script>
function ff1()
{
 if(document.f1.FirstName.value=='' || document.f1.MotherTongue.value=='Mother Tongue'){
           alert("Please enter your First Name");
           document.f1.FirstName.focus();
           return false;}

            if(document.f1.MotherTongue.value=='' || document.f1.MotherTongue.value=='Mother Tongue'){
               alert("Please enter your Mother Tongue");
               document.f1.MotherTongue.focus()
               return false;}
return true;

}    
</script>
</head>
<form method="post" action="filenext.php" name="f1" onBlur="ff1()>
Name :
        <input name="FirstName" type="text" class="dropmenu" id="FirstName" value="First Name" size="15" maxlength="30" onBlur="ff1()"/>
<input name="LastName" type="text" class="dropmenu" id="LastName" value="Last Name" size="20" maxlength="30"/><br />
Mother Tongue :
<input name="MotherTongue" type="text" class="dropmenu" id="MotherTongue" value="Mother Tongue" size="20" maxlength="30" />

<input name="submit" type=submit class="button" value="submit" />
</form>
</html>

Edited 3 Years Ago by happygeek: fixed formatting

mmm I see... Please, in the future use code tags when you post code to get more clear.
The problem is in the conditions. If you use OR, when one is true, returns ever true value. If you use AND, the two values should be true to execute the intrinsical methods.
Use complete headers with doctype, then use W3C validator. Note the use of getElementById, it is another method.
Also, you could split the ff1() in two functions, and call each condition in accordance with the id element if there are problems later.

<html>
<head>
<script>
function ff1()
{
if(document.getElementById('FirstName').value==""){
alert("Please enter your First Name");
document.getElementById('FirstName').focus();
}

if(document.getElementById('MotherTongue').value==""){
alert("Please enter your Mother Tongue");
document.getElementById('MotherTongue').focus()
}


} 
</script>
</head>
<form method="post" action="validation.php">
Name :
<input name="FirstName" type="text" class="dropmenu" id="FirstName" value="First Name" size="15" maxlength="30" onblur="ff1()" />
<input name="LastName" type="text" class="dropmenu" id="LastName" value="Last Name" size="20" maxlength="30"/><br />
Mother Tongue :
<input name="MotherTongue" type="text" class="dropmenu" id="MotherTongue" value="Mother Tongue" size="20" maxlength="30" onblur="ff1()" />

<input name="submit" type="submit" class="button" value="submit" />
</form>
</html>
This article has been dead for over six months. Start a new discussion instead.