JavaScript Form Validation when false

Question

This is really bothering me. I just want the form to not submit if the function returns false. Here is the script.

function checkPass(){
                          var pass1 = document.getElementById('pass');
                          var pass2 = document.getElementById('pass2');
                          var message = document.getElementById('confirmMessage');
                          var goodColor = "#224466";
                          var badColor = "#900000";
                          if(pass1.value == pass2.value){
                            pass2.style.backgroundColor = goodColor;
                            
                            
                            return true;
                          }else{
                            pass2.style.backgroundColor = badColor;
                            
                            
                            return false;
                          }
                        }

The form still submits when I use:

<form onsumbit="checkPass();">
</form>

and when I use:

<form>
<input type="submit" onclick="checkPass();">
</form>

and no luck. Any ideas?

Your code is a little confusing. Can you clarify the form you are trying to work with? Is this checkPass in your onsubmit function? — wajiw
– wajiw, Commented Nov 18, 2010 at 22:10

Maghoumi · Accepted Answer · 2010-11-18 22:14:20Z

3

Use this on the onsubmit event of your form:

onsubmit="return checkPass()"

Or this one for your Submit button (the input tag):

onclick="return checkForm()"

edited Nov 18, 2010 at 22:14

answered Nov 18, 2010 at 22:05

Maghoumi

3,4083 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nemophrost · Accepted Answer · 2010-11-18 22:12:04Z

2

If you are using xhtml make sure 'onsubmit' is lowercase.

<form onsubmit="return checkPass()" ... >

answered Nov 18, 2010 at 22:12

nemophrost

5671 gold badge8 silver badges11 bronze badges

Comments

NickFitz · Accepted Answer · 2010-11-18 22:17:29Z

As M2X says, you need to use

<form onsubmit="return checkPass();">

The reason is that when you assign an event handler as an attribute that way, what actually happens internally is that a new anonymous function is created wrapped around the code in the attribute, and that function needs to return the value that will prevent or allow the form submission.

So your original onsubmit attribute will be turned into:

function() {
    checkPass();
}

which executes the checkPass function but discards its return value. By including the return in the attribute, it will be turned into:

function() {
    return checkPass();
}

which will return the value returned to it by the checkPass function, thereby achieving the desired effect.

Collectives™ on Stack Overflow

JavaScript Form Validation when false

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related