admin管理员组

文章数量:1417041

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 pare 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

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 pare 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

  • javascript
  • html
  • forms
Share Improve this question edited Sep 17, 2014 at 20:24 Huangism 16.4k7 gold badges50 silver badges75 bronze badges asked Sep 17, 2014 at 20:22 MikeMike 1,0695 gold badges23 silver badges50 bronze badges 2
  • 1 Shouldn't you have the return true/false reversed – Huangism Commented Sep 17, 2014 at 20:26
  • 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 Commented Sep 17, 2014 at 20:28
Add a ment  | 

2 Answers 2

Reset to default 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.

Take out return from the onclick.

onClick="checkform(form1);"

本文标签： javascriptComparing form input valuesStack Overflow

版权声明：本文标题：javascript - Comparing form input values - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745264800a2650535.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。