javascript - In HTML5 want to validate password and confirm password - Stack Overflow

admin管理员组

文章数量:1390192

I want to validate password and confirm password in HTML5. By using function required I have validated for empty value. But not able to validate password and confirm password

HTML:

<form id="registration" name="registration" action="registrationaction.php" method="POST">
<input type="password" class="agent-input registerinput" name="pswd" id="pswd">
<input type="password" class="agent-input registerinput " name="confirmpassword" id="confirmpassword">
</form>

JavaScript:

<script>
$().ready(function() 
{
    $("#registration").validate({
            rules:  pswd: {
                    required: true
                },
                            confirmpassword: {
                    required: true
                },
            },
            messages
                pswd: "Please enter password",
                            confirmpassword: "Please enter valid confirm password",                   
            },      
            submitHandler: function() { $('#registration').submit(); }
        });
    });

I want to validate password and confirm password in HTML5. By using function required I have validated for empty value. But not able to validate password and confirm password

HTML:

<form id="registration" name="registration" action="registrationaction.php" method="POST">
<input type="password" class="agent-input registerinput" name="pswd" id="pswd">
<input type="password" class="agent-input registerinput " name="confirmpassword" id="confirmpassword">
</form>

JavaScript:

<script>
$().ready(function() 
{
    $("#registration").validate({
            rules:  pswd: {
                    required: true
                },
                            confirmpassword: {
                    required: true
                },
            },
            messages
                pswd: "Please enter password",
                            confirmpassword: "Please enter valid confirm password",                   
            },      
            submitHandler: function() { $('#registration').submit(); }
        });
    });

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 6, 2014 at 18:38 Kara 6,2261616 gold badges5353 silver badges5858 bronze badges asked Feb 3, 2014 at 5:17 JazzJazz 5322 gold badges33 silver badges1010 bronze badges 10

• 1 write logic for that in jquery... – Kuldeep Choudhary Commented Feb 3, 2014 at 5:19
• Use $(document).ready(function() { // code here }) you didn't write document keyword. – user2727841 Commented Feb 3, 2014 at 5:26
• yeah you can check the equality of both by fetching the values in some variable through jquery. – Learner Commented Feb 3, 2014 at 5:44
• please also be aware that this validation in effect means nothing, other than as a convenience factor for the user, since it is client side. also include this check from the server side as well. – Andrew Brown Commented Feb 3, 2014 at 5:45
• did you see the code of @user2727841... – user2727841 Commented Feb 3, 2014 at 5:45

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

There are several methods to confirm the two password match. However, assuming you want to utilize the jQuery Validation Plugin (which your question seems to use), changing your Javascript code to this will do the job:

$().ready(function(){
    $("#registration").validate({
        rules: { 
            pswd: {
                required: true
            },
            confirmpassword: {
                required: true,
                equalTo: "#pswd"
            }
        },
        messages: {
            pswd: "Please enter password",
            confirmpassword: "Please enter valid confirm password"
        },      
        submitHandler: function() { $('#registration').submit(); }
    });
});

I should point out that your Javascript example had several issues (unclosed brackets, etc). They've been corrected in the example above.

And for more amazingness you can create with jQuery Validation Plugin, definitely remember to see their documentation webpage for an easy-to-read list of available options.

P.S. To everyone insisting that $().ready() must be changed, I'd like to point out that it is perfectly valid syntax according to the jQuery documentation (although not remended, it is valid).

You should write your code within proper ready() function. I think the code you have provided must be throwing errors. Anyhow two correct ways to do this would be:

$( document ).ready(function() {
    //your code es here
});


$(function() {
    //your code es here
});

Inside these you can write the form validation code. Please be clear on the point that you can only do this with JavaScript.

$(document).ready(function() {
    $("#registration").validate({
            rules:  pswd: {
                    required: true
                },
                            confirmpassword: {
                    required: true
                },
            },
            messages
                pswd: "Please enter password",
                            confirmpassword: "Please enter valid confirm password",                   
            },      
            submitHandler: function() { $('#registration').submit(); }
        });
    });

OR

$(function() {
   $("#registration").validate({
            rules:  pswd: {
                    required: true
                },
                            confirmpassword: {
                    required: true
                },
            },
            messages
                pswd: "Please enter password",
                            confirmpassword: "Please enter valid confirm password",                   
            },      
            submitHandler: function() { $('#registration').submit(); }
        });
});

both function $(document).ready(function() { // code here }); and $(function() { // code here }); are equivalent. Don't forget to code for server side validation!!!

本文标签： javascriptIn HTML5 want to validate password and confirm passwordStack Overflow