Problem with jQuery Validation plugin: it won't validate all fields (just one)

Question

As you can see in my full code below, I'm trying to use jQuery's Validation plugin to do some very simple validating of a Change My Password form (which appears in a jQuery-UI dialog box).

The form has 3 input boxes:

existing password (required)
new password (required, 5-20 characters)
confirm new password (required, identical to new password)

This should be super easy, but I'm seeing that the validator allows the user to type only the existing password and skip the other fields. What should I do differently? Thanks!

Full Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <link href="http://localhost:8080/css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" /> 
            <script src="http://localhost:8080/js/jquery-1.4.3.min.js" type="text/javascript" ></script> 
            <script src="http://localhost:8080/js/jquery.validate.min.js" type="text/javascript"></script> 
            <script src="http://localhost:8080/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> 
        </head> 
        <body> 
            <style>
                .error{
                    color:red;
                    font-size:8pt;
                }
                .valid{
                    color:green;
                }
            </style>
            <form id="usersForm" action="profile/save" method="POST">
                <a href="#" id="changePasswordLink">Change my password</a>
            </form>

            <div id="dialog-changePassword" title="Update My Password">    
                <form id="changePasswordForm">
                    <table>
                        <tr>
                            <td style="font-weight:bold;text-align:right;padding-right:1em;">
                                <span>Current Password: </span>
                            </td>
                            <td>
                                <input type="password" class="currentPassword" id="currentPassword" /> 
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight:bold;text-align:right;padding-right:1em;">
                                <span>New Password: </span>
                            </td>
                            <td>
                                <input type="password" class="newPassword" id="newPassword" /> 
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight:bold;text-align:right;padding-right:1em;">
                                <span>Confirm New Password: </span>
                            </td>
                            <td>
                                <input type="password" class="confirmPassword" id="confirmPassword" /> 
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </body>
    </html>
    <script type="text/javascript">
        $(document).ready(function() {

            $( "#changePasswordLink" ).click(function(){
                $('#changePasswordForm').validate({
                    success: function(label) {
                        label.addClass("valid").html("OK!");
                    }});

                jQuery.validator.addClassRules({
                    currentPassword: {
                        required: true
                    },                   
                    newPassword: {
                        required: true,
                        minlength: 5,
                        maxlength: 20
                    },
                    confirmPassword: {
                        equalTo: "#newPassword"
                    }                        
                });
                //alert(JSON.stringify($("#currentPassword").rules()));            
                //                        alert(JSON.stringify($("#newPassword").rules()));            
                //                      alert(JSON.stringify($("#confirmPassword").rules()));
                $( "#dialog-changePassword" ).dialog('open');
            });

            $( "#dialog-changePassword" ).dialog({
                modal: true
                ,autoOpen:false     
                ,resizable:false
                ,width:600
                ,buttons: { 
                    "Update My Password": function() { 
                        //                    $("#changePasswordForm input").each(function(){
                        //                       var me=$(this); 
                        //                       alert(JSON.stringify(me.rules()));
                        //                    });
                        var errorCount=$('#changePasswordForm').validate().numberOfInvalids();
                        //$('#changePasswordForm').valid()
                        if(!errorCount && $('#changePasswordForm').valid()){
                            $(this).dialog("close");
                            var userId='1';
                            var currentPassword=$('#currentPassword').val();
                            var newPassword=$('#newPassword').val();
                            var confirmPassword=$('#confirmPassword').val();
                            alert('ajax would submit the info now');
                        }else{
                            alert("There are still "+errorCount+" errors.")
                        }
                    }
                    ,"Cancel": function() { $(this).dialog("close"); }
                }
            });
        });//end docReady
    </script>

Wait, the validator is only validating one field, or something is blocking you from entering data into some of the fields (ie, you can only type in one)? — Michael
The user can enter info into any/all of the 3 fields. The validation only works on the first field on the first pass. On the second pass of the validation, it seems to have awareness of at least one of the other fields. — Ryan

BruceHill BruceHill · Accepted Answer · 2013-07-29T08:36:13

I believe the reason the jQuery Validation is behaving like this is because your input elements do not have name attributes. Give each input element a unique name attribute and it will then validate all your fields.

Problem with jQuery Validation plugin: it won't validate all fields (just one)

2 Answers