Member Avatar for rime

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 by happygeek because: fixed formatting
  • 2 Contributors
  • 1 Reply
  • 80 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by martin5211
Member Avatar for martin5211

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.