Question

I have a form with JavaScript validation. Upon there being an error, the submit button should ‘grey-out’ and the form should not be submitted. However, the last couple of functions seem to submit the form even though they pop the alert box. Why?

Button code:

<input type="submit" name="button" id="button"
       onclick='return formvalidation();' value="Next" />

Non-working function example:

function BlankSite() {
    var SiteNum= document.getElementsByName("sitesinput")[0].value;
    if ((SiteNum == "") || (SiteNum == 0))
    {
        alert("You have not selected an amount of sites.")
        document.forms[0].button.disabled = true;
        return false;
    }
}

Function initiator:

function formvalidation()
{
    ZeroPhones();
    BlankPC();
    BlankSite();
    BlankSeats();
    phone_change();
} // End of formvalidation

This is very strange and I have tried various workarounds all to no avail!

Answer 1

They are returning false (and breaking, which is actually unreachable code) but the results are never returned to parent validation function. Your validator, assuming it’s bound to the form action, should look like:

function formvalidation(){
{
  if (!ZeroPhones())
    return false;
  if (!BlankPC())
    return false;

  //
  // keep checking for false and return false.
  //

  // default to return true
  return true;
}

So when the functions do in-fact return false, the false return is carried back up through to the bound function.