10

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!

6 Answers 6

8

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.

3
  • @Bifterss: Recommend hooking submit on the form rather than the click on the submit button. If you have text fields in the form, for instance, pressing Enter in them may submit the form without "clicking" a button on some browsers, whereas the submit event is reliable for any user-initiated kind of form submission. Jun 20, 2011 at 14:57
  • @T.J. that's correct, but you posted the comment on my answer instead of on the question. Coffee? ;) Jun 20, 2011 at 15:08
  • I meant it as an adjunct to the answer, which is of course, correct. :-) Jun 20, 2011 at 16:10
5

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.

4
  • Return false alone doesn't work. It just goes right to the controller. You have to add event.preventDefault() BEFORE you return false.
    – Ashley
    Jun 12, 2020 at 17:02
  • 1
    @Ashley returning false implicitly calls preventDefault & stopPropagation. Only time you really need to explicitly call it is in cases where the function isn't the direct hook and there're multiple bindings. From OPs post, didn't appear this was the case. Jun 12, 2020 at 17:32
  • Why not return ZeroPhones() && BlankPC()? Jul 20, 2020 at 14:33
  • @PeterMortensen was just showing chaining. Could also &&= or ||= Jul 20, 2020 at 14:36
3

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.

1
  • Why not return ZeroPhones() && BlankPC() && BlankSite() && BlankSeats() && phone_change(); Jul 20, 2020 at 14:39
3

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.

1

formvalidation() isn't returning false.

Maybe you want something like:

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

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;
    }
}
1
  • That may be necessary, but what is the explanation? Overriding the form one is supposed to be sufficient. Jul 20, 2020 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.