Home/ Questions/Q 9061189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:25:19+00:00

I am using http://bassistance.de/jquery-plugins/jquery-plugin-validation/ to validate a form which will allow a user to

  • 0

I am using http://bassistance.de/jquery-plugins/jquery-plugin-validation/ to validate a form which will allow a user to change their existing settings. The form has a field for a password as well as a field to confirm the password. To leave the password unchanged, I instruct the user to leave it blank (maybe some more intuitive way to do this?), and the confirm password field is only shown if the user changes his/her password.

It works pretty well, but has two problems. First, if you enter something in the password field and press tab, you don’t go to the confirm password field, but the next field after that. Second, if you enter something in the password field and press enter, the form is submitted before the confirm password is checked. For some reason, this second deficiency doesn’t manifest using the jsfiddle demo http://jsfiddle.net/4htKu/2/, but it does on the second identical demo http://tapmeister.com/test/validatePassword.html. The code below is identical to the previous two mentioned demos. I believe the problems relates to the confirm_password password being hidden, but am not certain. What do I need to do to fix these two problems? Thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>jQuery validation plug-in - main demo</title>

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(function() {

                $("#confirm_password").parent().hide();
                $("#password").val('').
                blur(function() {
                    $t=$(this);
                    if($.trim($t.val())!="" && !$t.hasClass('error')) {$("#confirm_password").parent().show();}
                    else if($.trim($t.val())=="") {$("#confirm_password").val('').parent().hide();}
                });

                // validate signup form on keyup and submit
                $("#signupForm").validate({
                    rules: {
                        firstname: {required: true,minlength: 2},
                        lastname: {required: true,minlength: 2},
                        username: {required: true,minlength: 2},
                        password: {required: true,minlength: 2},
                        confirm_password: {required: true,minlength: 2, equalTo: "#password"}
                    },
                    messages: {},
                    submitHandler: function(form) {alert("submitted");}
                });

            });
        </script>

    </head>
    <body>

        <form class="cmxform" id="signupForm" method="get" action="">
            <fieldset>
                <legend>Validating a complete form</legend>
                <p>
                    <label for="firstname">Firstname*</label>
                    <input id="firstname" name="firstname" />
                </p>
                <p>
                    <label for="lastname">Lastname*</label>
                    <input id="lastname" name="lastname" />
                </p>
                <p>
                    <label for="username">Username*</label>
                    <input id="username" name="username" />
                </p>
                <p>
                    <label for="password">Password (Leave blank to remain unchanged)</label>
                    <input id="password" name="password" type="password" />
                </p>
                <p>
                    <label for="confirm_password">Confirm password</label>
                    <input id="confirm_password" name="confirm_password" type="password" />
                </p>
                <p>
                    <label for="other">Other Non-required</label>
                    <input id="other" name="other" />
                </p>
                <p>
                    <input class="submit" type="submit" value="Submit" />
                </p>
            </fieldset>
        </form>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of using .blur, use .keydown and a settimeout to detect if the value is blank. If it isn’t blank, show it, else, hide it.

    $("#password").keydown(function() {
    var self = this, $self = $(this);
    setTimeout(function(){
        if ( $.trim(self.value) != "" && !$self.is(".error") ) {
            $("#confirm_password").parent().show();
            return;
        }
        $("#confirm_password").val('').parent().hide();
    },0);
});

    As far as pressing enter, isn’t that what it’s supposed to do? submit the form?

    The reason using .blur doesn’t work is you are tabbing to the next field before the hidden field is shown. This code fixes that problem.

    • 0