Form onsubmit issues?

Question

I have some validation code written to validate some form entries, i try to call them using the onsubmit command but when i use the form it seems like only the the first function called in the line works and once that has been successfully validated the rest of the functions are ignored and the form just submits? Here is my code :

<script>
function validateFamily()
{
var family=document.getElementById('family');
if (family.value=="")
    {
     alert("Family name must be filled out");
     return false;
    }
else if (document.getElementById('family').value.length > 35)
    {
        alert("Family name cannot be more than 35 characters");
        return false;
    }
}

function validateGiven()
{
var given=document.getElementById('given');
if (given.value=="")
    {
     alert("Given name must be filled out");
     return false;
    }
else if (document.getElementById('given').value.length > 35)
    {
        alert("Given name cannot be more than 35 characters");
        return false;
    }
}

function validDate()
{
var chkdate = document.getElementById("dob").value
if(document.getElementById("dob").value == "")
{
    alert("Please enter Date of Birth")
    return false;
}
else if(!chkdate.match(/^(0[1-9]|[12][0-9]|3[01])[\- \/.](?:(0[1-9]|1[012])[\- \/.](200)[0-4]{1})$/))
    {
      alert('The entered date is an incorrect format');
     return false;
    }
}

function validateMaleFemale() 
{
var radios = document.getElementsByName('malefemale');

for (var i = 0; i < radios.length; i++) 
{
    if (radios[i].checked) 
{
    return true;
}
};
alert ('You must choose male or female');
return false;
}

function validateAddress()
{
var address = document.getElementById('address');
var stringa = document.getElementById('address').value;
if (address.value=="")
    {
     alert("Address must be filled out");
     return false;
    }
else if (document.getElementById('address').value.length > 150)
    {
        alert("Address cannot be more than 150 characters");
        return false;
    }
else if (/[^a-zA-Z0-9\-\/]/.test( stringa ) )
    {
        alert("Address can only contain alphanumeric, hypehns(-) and backslash's(/)")
        return false;
    }
}

function validateParent()
{
var parent = document.getElementById('parenta');
var stringb = document.getElementById('parenta').value;
if (parent.value=="")
    {
     alert("Parent/Carer name must be filled out");
     return false;
    }
else if (document.getElementById('parenta').value.length > 60)
    {
        alert("Parent/Carer name can not be more than 60 characters");
        return false;
    }
else if (/[^a-zA-Z\-\/]/.test( stringb ) )
    {
        alert("Parent/Carer can only contain alphabetic and hypehns(-)")
        return false;
    }
}

function validateWork()
{ 
var num1 = document.getElementById('workno').value;

if (num1 !== "" && !num1.match(/\(\d{2}\)\d{8}/))
{
alert('That is not correct telephone number format');
return false;
}
}

function validateHome()
{ 
var num2 = document.getElementById('homeno').value;

if (num2 !== "" && !num2.match(/\(\d{2}\)\d{8}/))
{
alert('That is not correct telephone number format');
return false;
}
}

function validateMob()
{ 
var num3 = document.getElementById('mob').value;

if(num3 == "")
{
alert('Please enter a mobile number');
return false;
}
else if (num3 !== "" && !num3.match(/\(\d{3}\)\d{8}/))
{
alert('That is not correct mobile number format');
return false;
}
}
</script>

<form name="eoiform" method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return !!(validateFamily() && validDate() && validateAddress() && validateParent() && validateMaleFemale() && validateMob() && validateHome() && validateWork());">

So for example the function validateFamily() will work normally and alert me if the field is empty but after something has been entered into the field the the other functions are ignored and the form submits. Could anyone please advise me on why this is happening or how to fix it?

Answer 1

EDIT: Some of your validate methods does not return a value by default (i.e.) when the validation passes:

Ex:

    function validateFamily()
    {
       var family=document.getElementById('family');
       if (family.value=="")
       {
           alert("Family name must be filled out");
           return false;
       }
       else if (document.getElementById('family').value.length > 35)
       {
           alert("Family name cannot be more than 35 characters");
           return false;
       }
      return true;// Add this to all validate Methods!
    }

Add a default return value in all validateXxx() methods. Let me know if this works.