Reputation: 24093

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

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>

Upvotes: 1

Answers (2)

BruceHill

Reputation: 7174

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.

Upvotes: 1

George Cummins

Reputation: 28936

You are using a mixture of $(...) and Jquery(...) You should updated your code to use one or the other. $(...) is preferred unless there is a conflict with another library.

Upvotes: 0

Problem with jQuery Validation plugin: it won&#39;t validate all fields (just one)

Answers (2)

Related Questions

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