JavaScript code returns false, but still the form is submittted

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 == "&q开发者_StackOverflowuot;) || (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!

You need to have return false; in the function called by the onclick, in this case formvalidation.

Having some function called by the "root" function return false has no effect whatsoever. The return value is lost.

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.

BlankPC() is called by formvalidation so false is returned into the method formvalidation().

Your formvalidation() is always falling off the end which is the same as returning true. If you want it to return false when one of your validations fails, it should be:

function formvalidation()
{
    retval = true;
    retval &= ZeroPhones();
    retval &= BlankPC();
    retval &= BlankSite();
    retval &= BlankSeats();
    retval &= phone_change();

    return retval;
} // End 

This can be optimized a bunch, but you can get the gist of it.

Call the JavaScript function onSubmit of the form instead of calling at button onClick.

JavaScript code

function validate()
{
    alert('test');
    return false;
}

<form action="test" method="post" onsubmit="return validate();">

This is working fine for me.

formvalidation() isn't returning false.

Maybe you want something like:

function formvalidation()
{
  if(!ZeroPhones() ||
     !BlankPC() ||
     !BlankSite() ||
     !BlankSeats() ||
     !phone_change())
    return false;
}

My solution to this problem was to disable the submit button until the validation was successful. Something along these lines:

function checkPassword() {
    // This is my submit button

    document.getElementById('nextBtn').setAttribute('disabled', 'disabled');

    password1 = document.getElementsByName("pwd1")[0].value;
    password2 = document.getElementsByName("pwd2")[0].value;

    if (password1 == '') {
        // If password not entered
        alert ("Please enter Password");
        return false;
    } else if (password2 == ''){
        // If confirmation password not entered
        alert ("Please enter confirm password");
        return false;
    } else if (password1 != password2) {
        // If NOT the same, return false.
        alert ("\nPassword did not match: Please try again...");
        return false;
    } else {
        document.getElementById('nextBtn').removeAttribute('disabled');
        return true;
    }
}