Andurit Andurit - 5 years ago 173
Javascript Question

jQuery validation - check if two passwords are equal

I am having some problems here, I have simple bootstrap form for change password integrated to my design and I want to validate it with jQuery.

What I want is simple, check if both passwords are same, and if not, display some error message.

My HTML looks like:

<div class="container">
<div class="row vertical-center">
<br>
<div class="col-md-6 col-md-offset-3">
<br>
<form role="form" action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Meno (email)</label>
<input class="form-control" id="disabledInput" type="text" placeholder="michal.melnikovic@audatex.cz" disabled>
</div>
<div class="form-group">
<label for="text">Staré heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
</div>
<div class="form-group">
<label for="password">Nové heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše nové heslo" name="password">
</div>
<div class="form-group">
<label for="password_again">Again</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe znova vaše nové heslo" name="password_again">
</div>
<button type="submit" class="btn btn-default">Zmeniť heslo</button>
</form>
</div>
</div>
</div>


And I am trying to add something like:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>


Same script work perfect for me on my other code, so it looks i am blind or I don't know where I making a mistake!

Guys can somebody of you without watching to my code for days look at this and tell me what I am doing wrong?

THANKS!!

Answer Source

This worked for me:

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
    <form id="myform">
        <div class="form-group">
            <label for="exampleInputEmail1">Meno (email)</label>
            <input class="form-control" id="disabledInput" type="text" placeholder="michal.melnikovic@audatex.cz" disabled>
        </div>
        <div class="form-group">
            <label for="text">Staré heslo</label>
            <input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
        </div>
        <div class="form-group">
            <label for="password">Nové heslo</label>
            <input type="password" class="form-control" id="password" placeholder="Vložťe vaše nové heslo" name="password">
        </div>
        <div class="form-group">
            <label for="password_again">Again</label>
            <input type="password" class="form-control" id="password_again" placeholder="Vložťe znova vaše nové heslo" name="password_again">
        </div>
        <button type="submit" class="btn btn-default">Zmeniť heslo</button>
    </form>

        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
        <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
        <script>
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });
            $("#myform").validate({
                rules: {
                    password: "required",
                    password_again: {
                        equalTo: "#password"
                    }
                }
            });
        </script>
</body>
</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download