Comparing form input values

Question

I know there are a few threads on this topic, and in fact I got my code from one such thread, but I just can't seem to get it to run. I'm trying to compare two input boxes in an HTML form using javascript.

Here is my JS:

<script>
function checkform(form1)
{
    if(form1.password.value != form1.passwordConfirm.value)
    {
        alert("Passwords must be the same");
        form1.password.focus();
        return true;
    } else {return false;}
}
</script>

Here is the HTML:

<!Doctype html>
<script type="C:/wamp/www/Table/" src="javascript.js"></script>
<form name="form1" action="demo_form.asp">
    Username: <input type="text" name="usrname" required oninvalid="this.setCustomValidity('Username cannot be empty.')">
    Password: <input type="password" name="password" required oninvalid="this.setCustomValidity('Password cannot be empty')">
    Confirm Password: <input type="password" name="passwordConfirm" required oninvalid="this.setCustomValidity('Password        cannot be empty')"> 
    <input type="submit" value="Submit" onClick="return checkform(form1);">
</form>
</html>

Any help would be awesome!

Thanks

Mike

Just as a tip: instead of passing form1 to the function use this.form do directly hand over the correct dom-element. No need to use a getElementById anymore (for the form itself) — newBee
– newBee, Commented Sep 17, 2014 at 20:28

Cerbrus · Accepted Answer · 2014-09-17 20:31:35Z

3

You'll need to assign an id to your form, and get that.

Replace:

<form name="form1" action="demo_form.asp">

With:

<form name="form1" action="demo_form.asp" id="myForm">

And and this:

function checkform(form1){

With this:

function checkform(){
    var form1 = document.getElementById('myForm')

You also need to switch your return statements, to return false when the PW's don't match.

The resulting JS / HTML:

function checkform(){
    var form1 = document.getElementById('myForm');
    if(form1.password.value != form1.passwordConfirm.value)
    {
        alert("Passwords must be the same");
        form1.password.focus();
        return false;
    }
    return true;
}

<form name="form1" action="demo_form.asp" id="myForm">
    Username: <input type="text" name="usrname" required oninvalid="this.setCustomValidity('Username cannot be empty.')">
    Password: <input type="password" name="password" required oninvalid="this.setCustomValidity('Password cannot be empty')">
    Confirm Password: <input type="password" name="passwordConfirm" required oninvalid="this.setCustomValidity('Password        cannot be empty')"> 
    <input type="submit" value="Submit" onClick="return checkform();">
</form>

Notice how I removed the else around the second return statement. It's not needed.

edited Sep 17, 2014 at 20:31

answered Sep 17, 2014 at 20:25

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

9 Comments

Huangism Over a year ago

and reverse the return true and false

elzi Over a year ago

Not necessary, by giving the form a name it is attached to the document

Cerbrus Over a year ago

@elzi: A variable that's easily overwritten. It's always a good idea to explicitly get your form.

elzi Over a year ago

How would it be overwritten besides if he gave another element the same name attribute value?

Cerbrus Over a year ago

You've never seen programmers (accidentally) re-use names? Did that really warrant a downvote, just because of a difference in opinion?

|

elzi · Accepted Answer · 2014-09-17 20:26:46Z

-1

Take out return from the onclick.

onClick="checkform(form1);"

answered Sep 17, 2014 at 20:26

elzi

5,6927 gold badges39 silver badges62 bronze badges

Collectives™ on Stack Overflow

Comparing form input values

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related