Jquery Validator Confirm Password issue

Question

I am trying to do the validation with jquery validator. For the first time every thing works fine.

But from second time, without changing any thing in the password field, if i go to the confirm password section, password ideally will show error but at the same time confirm password is also showing error, "confirm password not matches to password."

Confirm password should show error only after entering the wrong password which not matches with the password.

Is there any solution for this issue or Do i need to write my own custom method extending the validator method.

Here it is what I tried:

$(document).ready(function(){
$("#cp").validate(validateChangePswrdForm("changePasswordForm"));
});
var validateChangePswrdForm = function() {
    var that = this;
    return {
        rules: {
            password: {
                required: true,
                minlength: 8,
            },
            confirmpassword: {
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "password is required",
                minlength: 5
            },
            confirmpassword: {
                required: "confirm password is required",
                minlength: 5
            }
        },
        submitHandler: function(fId, evt) {
            var serForm = $(fId).serialize();
            changepassword(fId, evt)
        }
    }
};

var changepassword = function(){
 alert('Validated');
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="cp">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-7">
                <form method="post" role="form" autocomplete="off" name="changePasswordForm" id="changePasswordForm">
                    <div class="alert alert-danger changepassword-error hidden">
                    </div>
                    <div class="form-group">
                        <label for="password">password</label>
                        <input type="password" class="form-control" name="password" id="password" placeholder="password">
                    </div>
                    <div class="form-group reg-form col-sm-7 padLeft">
                        <label for="confirmpassword">Confirm Password</label>
                        <input type="password" class="form-control noradius" name="confirmpassword" id="confirmpassword" placeholder="Confirm Password">
                    </div>
                    <div class="btn-toolbar">
                        <button type="submit" class="btn">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

I don't see this message in your script confirm password not matches to password — RIYAJ KHAN
– RIYAJ KHAN, Commented Mar 5, 2016 at 12:11

Sparky · Accepted Answer · 2016-03-05 16:53:58Z

Your code:

$("#cp").validate(....

For the first time every thing works fine

It's impossible that it could be working at all. If you attach the .validate() method to a <div> (id="cp"), nothing will happen. To initialize the plugin, you can only attach this method to a <form> element.

Also, you cannot pass two arguments into the submitHandler function. It was only specified to handle one argument that represents the form object.

And the values within the messages object can only contain strings representing the custom error messages. You have messages defined for rules that were never declared as well as values that are not strings.

This is working:

$(document).ready(function() {

    $("#changePasswordForm").validate({
        rules: {
            password: {
                required: true,
                minlength: 8,
            },
            confirmpassword: {
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "password is required",
                // minlength: 5 // <- this must be a string!
            },
            confirmpassword: {
                required: "confirm password is required",
                // minlength: 5 // <- this must be a string!
            }
        },
        submitHandler: function(fId) {
            var serForm = $(fId).serialize();
            changepassword()
        }
    });

});

var changepassword = function() {
    alert('Validated');
};

DEMO: http://jsfiddle.net/eqouszsw/

Collectives™ on Stack Overflow

Jquery Validator Confirm Password issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related