jQuery form validation with password fields

Question

I am trying to validate my form and for some reason it always validates true even if I don't enter any value in the field for password fields. If I change my control to text the validation works if I don't enter anything in textbox. below is my code. I can't figure out what am I doing wrong here.

<form id="frmChangePassword" action="http://localhost/PatientAccount" method="post">
    <div class="row"><input type="password" id="txtPWD" name="txtPWD" placeholder="" style="" class="text focus" value=""></div>
    <div class="row"><input type="password" id="txtReEnterPWD" name="txtReEnterPWD" placeholder="" style="" class="text" value=""></div>
    <div class="row"><input type="Button" ID="btnChangePassword" Name="btnChangePassword" STYLE="" Class="btn-submit" VALUE="Change Password" onClick="javascript:ValidateResetPassword();"></div>
</form>

<script>
function ValidateResetPassword() {
    $("#frmChangePassword").validate({
        rules: {
            "txtPWD": { required:true },
            "txtReEnterPWD": { required:true }
        },
        messages: {
            "txtPWD": { required: "Please enter Password" },
            "txtReEnterPWD": {required: "Please re-enter password" }
        }
    });

    if ($("#frmChangePassword").valid()) {
        hashPassword();
    }
}
</script>

You can edit your original question to add that info. And you can also format your code easily with a button in the editor. And what is the validate method? — Grant Thomas
– Grant Thomas, Commented Jan 18, 2013 at 19:40
Don't post code in the comment area. You can format your code in your post and paste the codes there. — Jai
– Jai, Commented Jan 18, 2013 at 19:41
validate() is a method provided by the jQuery Validation plugin. It's a very complex and large method, not to be pasted in a StackOverflow question. ;-) More important is to link to the Validate API for anybody who needs to understand it. — Greg Pettit
– Greg Pettit, Commented Jan 18, 2013 at 19:48
thanks for code formating tips. I am still new to stackoverflow. I will keep that in mind next time. — user1760153
– user1760153, Commented Jan 18, 2013 at 20:08

Sparky · Accepted Answer · 2013-01-19 16:45:36Z

You have a bunch of little issues.

1) You do not need inline JavaScript on the submit button to call the Validate plugin. The plugin takes care of that internally with its submitHandler callback function.

2) The submit button should be a <input type="submit". If you need it to be something else, that's going to require different code.

3) The .validate() function should only be used to "initialize" the form upon DOM ready. You incorrectly enclosed it within another function that's called every time the button is clicked.

4) Since the if valid conditional is only called once when the page loads, and since the form is always invalid on page load, the hashPassword() function is presently never called. If you want that function to occur whenever the form is valid, then just put it inside the submitHandler: callback function.

$(document).ready(function() {

    $("#frmChangePassword").validate({
        rules: {
            "txtPWD": {
                required: true
            },
            "txtReEnterPWD": {
                required: true
            }
        },
        messages: {
            "txtPWD": {
                required: "Please enter Password"
            },
            "txtReEnterPWD": {
                required: "Please re-enter password"
            }
        },
        submitHandler: function (form) { 
            hashPassword();
            form.submit();
            // alert('valid form'); // for demo
            // return false; // for demo
        }
    });

});

Working Demo:

http://jsfiddle.net/zgwkR/

Plugin Documentation:

http://docs.jquery.com/Plugins/Validation

Official Sample Forms:

http://jquery.bassistance.de/validate/demo/

Collectives™ on Stack Overflow

jQuery form validation with password fields

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