Comparing form input values

问题

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

回答1:

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.

回答2:

Take out return from the onclick.

onClick="checkform(form1);"

来源：https://stackoverflow.com/questions/25899694/comparing-form-input-values

标签

javascript

html

forms